Reactjs 在React应用程序中更正Firebase的Typescript类型

我不知道如何正确地将Firebase的Typescript类型添加到React应用程序中

我得到以下错误：

类型为“（{firebase}:Props）=>Element”的参数不可分配给类型为“ComponentType”的参数。 类型“（{firebase}:Props）=>Element”不可分配给类型“FunctionComponent”。 参数“\u0”和“props”的类型不兼容。 属性“firebase”在类型“{children？：ReactNode；}”中丢失，但在类型“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)

从“React”导入React
从“../Firebase”导入{withFirebase}
界面道具{
firebase:firebase.app.app
}
const Admin=（{firebase}:Props）=>{
常量[isLoading，setIsLoading]=React.useState（false）
const[users，setUsers]=React.useState（[]）
React.useffect（（）=>{
控制台日志（firebase类型）
setIsLoading（真）
const usersRef=firebase.database（）.ref（`users/`）
usersRef.on（`value`，（快照：any）=>{
const usersObj=snapshot.val（）
const usersLi=Object.keys（usersObj.map）（key=>({
…usersObj[key]，
uid：钥匙，
}))
设置用户（usersLi）
})
setIsLoading（错误）
return（）=>usersRef.off（）
}，[firebase]）
返回(
管理
{isLoading&&正在获取数据…
}
)
}
接口U{
uid:字符串
用户名：string
电子邮件：string
}
接口UL{
用户：U[]
}
const UserList=（{users}:UL）=>(

{users.map（user=>(

ID:{user.uid}
用户名：{user.username}
电子邮件：{user.Email}

))}

)
使用Firebase导出默认值（管理员）

查看

@types/firebase

，它说firebase现在提供了自己的类型。但我只是不确定如何正确设置

---

非常感谢。

事实证明，问题是我的Firebase HOC

：

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

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