Предоставление данных через HOC, но при вызове компонента Property '' отсутствует в типе '{}', но требуется в типе '' появляется ошибка

Question

У меня есть следующий компонент HOC, обеспечивающий основу для моего компонента:

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, но ваш тип возвращаемого значения не отражает это. Попробуйте:

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, но он также доступен в типах реагирования (я думаю). Точка получает компонент, который требует firebase вернуть компонент, который не