通过 HOC 提供数据，但在调用组件时 属性 '' is missing in type '{}' but required in type '' 出现错误

Question

我有以下 HOC 组件为我的组件提供 firebase：

import React from 'react'

const FirebaseContext = React.createContext({})

export const withFirebase = <Props extends object>(
  Component: React.ComponentType<Props>
): React.ComponentType<Props> =>
  class WithFirebase extends React.Component<Props> {
    render(): React.ReactNode {
      return (
        <FirebaseContext.Consumer>
          {(firebase): React.ReactNode => (
            <Component {...this.props} firebase={firebase} />
          )}
        </FirebaseContext.Consumer>
      )
    }
  }

export default FirebaseContext

我的组件如下所示：

import React from 'react'
import Firebase, { withFirebase } from '../Firebase'


interface FirebaseInterface {
  firebase: Firebase
}

const SignInGoogle: React.FC<FirebaseInterface> = ({ firebase }) => {
//component content
}

export default withFirebase(SignInGoogle)

但是每当我在我的页面中调用我的组件时，我都会收到以下错误： Property 'firebase' is missing in type '{}' but required in type 'FirebaseInterface' 和 SignInEmail.tsx(48, 3): 'firebase' is declared here.（我的组件）

Firebase 由我的 HOC 组件提供，我该如何摆脱这个错误？我究竟做错了什么？

Answer 1

问题是您实际上减少了 withFirebase HOC 中所需的属性，但是您的 return 类型没有反映出这一点。尝试：

import React from 'react'

const FirebaseContext = React.createContext({})

export const withFirebase = <Props extends { firebase: Firebase }>(
  Component: React.ComponentType<Props>
): React.ComponentType<Omit<Props,'firebase'>> =>
  class WithFirebase extends React.Component<Props> {
    render(): React.ReactNode {
      return (
        <FirebaseContext.Consumer>
          {(firebase): React.ReactNode => (
            <Component {...this.props} firebase={firebase} />
          )}
        </FirebaseContext.Consumer>
      )
    }
  }

export default FirebaseContext

Omit 助手需要 ts 3.5，但它也可以在 react typings 中使用（我认为）。给点一个组件需要 firebase return 一个不需要的组件