类型 '{ children?: ReactNode; 上不存在属性 'firebase' }' 如何正确注释？

Question

I'm providing my firebase object through a higher order component like this:

const FirebaseContextInterfaceLocal: FirebaseContextInterface = {
  value: new Firebase()
}

ReactDOM.render(
  <Router history={history}>
    <FirebaseContext.Provider value={FirebaseContextInterfaceLocal}>
      <App />
    </FirebaseContext.Provider>
  </Router>,
  document.getElementById('root')
)

And after that I'm using it like this:

const ForgotPassword: React.FC = ({ firebase }) => {

}

export default withFirebase(ForgotPassword)

But I'm getting the following error:

Property 'firebase' does not exist on type '{ children?: ReactNode; }'.

I'm trying to find out how to properly annotate this but I can't find any good explanation. Any help will be very appreciated!

Answer 1

use value key instead of firebase

const ForgotPassword: React.FC = ({ value }) => {

}

export default withFirebase(ForgotPassword)

or try to change the property of FirebaseContextInterfaceLocal to:

const FirebaseContextInterfaceLocal = {
  firebase: new Firebase()
}

ReactDOM.render(
  <Router history={history}>
    <FirebaseContext.Provider firebase={FirebaseContextInterfaceLocal.firebase}>
      <App />
    </FirebaseContext.Provider>
  </Router>,
  document.getElementById('root')
)

So you can do this:

const ForgotPassword: React.FC = ({ firebase }) => {

}

export default withFirebase(ForgotPassword)