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

【问题标题】：Property 'firebase' does not exist on type '{ children?: ReactNode; }' how to propperly annotate?类型 '{ children?: ReactNode; 上不存在属性 'firebase' }' 如何正确注释？
【发布时间】：2020-02-18 03:21:03
【问题描述】：

我通过像这样的高阶组件提供我的 firebase 对象：

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

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

然后我就这样使用它：

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

}

export default withFirebase(ForgotPassword)

但我收到以下错误：

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

我正在尝试找出如何正确注释此内容，但找不到任何好的解释。任何帮助将不胜感激！

【问题讨论】：

标签： reactjs typescript firebase

【解决方案1】：

使用 value 键而不是 firebase

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

}

export default withFirebase(ForgotPassword)

或者尝试将FirebaseContextInterfaceLocal的属性改为：

const FirebaseContextInterfaceLocal = {
  firebase: new Firebase()
}

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

所以你可以这样做：

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

}

export default withFirebase(ForgotPassword)

【讨论】：