reactjs - 在 React 应用程序中为 Firebase 正确的 Typescript 类型
问题描述
我对如何将 Firebase 的 Typescript 类型正确添加到 React 应用程序感到困惑?
我收到以下错误:
'({ firebase }: Props) => Element' 类型的参数不可分配给'ComponentType<{}>' 类型的参数。类型 '({ firebase }: Props) => Element' 不可分配给类型 'FunctionComponent<{}>'。参数 '__0' 和 'props' 的类型不兼容。'{ children?: ReactNode; 类型中缺少属性 'firebase' }' 但在 'Props'.ts(2345) 类型中是必需的
这与以下组件有关:
import React from 'react'
import { withFirebase } from '../Firebase'
interface Props {
firebase: firebase.app.App
}
const Admin = ({ firebase }: Props) => {
const [isLoading, setIsLoading] = React.useState(false)
const [users, setUsers] = React.useState<U[]>([])
React.useEffect(() => {
console.log(typeof firebase)
setIsLoading(true)
const usersRef = firebase.database().ref(`users/`)
usersRef.on(`value`, (snapshot: any) => {
const usersObj = snapshot.val()
const usersLi = Object.keys(usersObj).map(key => ({
...usersObj[key],
uid: key,
}))
setUsers(usersLi)
})
setIsLoading(false)
return () => usersRef.off()
}, [firebase])
return (
<div>
<h1>Admin</h1>
{isLoading && <p>Fetching data...</p>}
<UserList users={users} />
</div>
)
}
interface U {
uid: string
username: string
email: string
}
interface UL {
users: U[]
}
const UserList = ({ users }: UL) => (
<ul>
{users.map(user => (
<li
key={user.uid}
style={{
borderBottom: '1px solid #f4f4f4',
paddingBottom: '10px',
marginBottom: '10px',
}}
>
<span style={{ display: 'block' }}>
<strong>ID:</strong> {user.uid}
</span>
<span style={{ display: 'block' }}>
<strong>username:</strong> {user.username}
</span>
<span style={{ display: 'block' }}>
<strong>Email:</strong> {user.email}
</span>
</li>
))}
</ul>
)
export default withFirebase(Admin)
查看@types/firebase
npm 包,它说 Firebase 现在提供它自己的类型。但我只是不确定如何正确设置它。
非常感谢。
解决方案
原来,问题是我的 HOC withFirebase
:
import React from 'react'
const FirebaseContext = React.createContext()
export const withFirebase = Component => (props: any) => (
<FirebaseContext.Consumer>
{firebase => <Component {...props} firebase={firebase} />}
</FirebaseContext.Consumer>
)
export default FirebaseContext
问题是我没有向createContext
:提供类型React.createContext<firebase.app.App>
,我需要将 firebaseApp 的实例传递给createContext
,使其如下所示:
const FirebaseContext = React.createContext<firebase.app.App>(firebaseApp)
我还需要为组件添加一个类型,使withFirebase
:
import React from 'react'
import firebaseApp from './firebase'
const FirebaseContext = React.createContext<firebase.app.App>(firebaseApp)
export const withFirebase = (
Component: React.ComponentType<{ firebase: firebase.app.App }>,
) => (props: any) => (
<FirebaseContext.Consumer>
{firebase => <Component {...props} firebase={firebase} />}
</FirebaseContext.Consumer>
)
export default FirebaseContext
推荐阅读
- android - 泄漏的窗口,但希望在用户单击肯定按钮时完成活动
- f# - 如何为 Saturn 应用程序构建集成测试
- javascript - 试图从 API 中列出用户的最爱,得到“TypeError: null is not an object (evalating 'firebase.auth().currentUser.uid')
- node.js - 我在 Heroku 上的 Node.js 应用程序没有显示在浏览器 Android 手机中
- python - 如何在 Opencv 图像上剪切选区
- android - 错误:功能必须是有效的 BrowserStack App-Automate App URL
- javascript - 使用事件侦听器检测按钮的点击,然后增加 html 元素的计数
- java - JPA如何从ManyToMany关系中的对象的Arraylist中获取属性
- c# - 如何在 EmguCV 中保存具有透明背景的图像
- node.js - 如何从 Node 的 .env 文件中引用环境变量?