Question

我对如何正确将Firebase的Typescript类型添加到React应用感到困惑？

我收到以下错误：

类型'（{firebase}：Props）=>元素的参数不能分配给类型'ComponentType <{}>'的参数。类型'（{{firebase}：Props）=>元素'不可分配给'FunctionComponent <{}>'类型。参数'__0'和'props'的类型不兼容。类型'{children ?: ReactNode;类型中缺少属性'firebase'。 }”，但在“道具”类型中必填。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 package，它说Firebase现在提供了它自己的类型。但是我不确定如何正确设置它。

非常感谢。

Answer 1

结果是我的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)

我还需要为组件添加一个Type，使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

在React应用中为Firebase正确的Typescript类型

1 个答案: