使用null作为初始值时，React.createContextnull的打字稿类型

问题描述

我有这个钩子，可以用来从useContext

获取值

useFirebase.js

import React,{ useContext } from 'react';

export const FirebaseContext = React.createContext(null);

function useFirebase(): firebase.app.App {
  const firebase = useContext(FirebaseContext);
  return firebase;
}

export default useFirebase;

这是上下文提供者：

App.js

import { FirebaseContext } from '@hooks/useFirebase';

function App() {
  return(
    <FirebaseContext.Provider value={props.firebase}>
      // The app
    </FirebaseContext.Provider>
  );
}

然后我通过以下操作访问整个应用程序：

SomeComponent.ts

const firebase = useFirebase();

问题

在useFirebase.ts文件中，在null中初始化的React.createContext(null)之间遇到麻烦

如何摆脱这种冲突？

注意：props.firebase类型为firebase.app.App

我通常用createContext叫null，这就是Typescript抱怨的原因。

以下代码似乎可以解决问题，但我不想使用{}而不是null。

export const FirebaseContext = React.createContext({} as firebase.app.App);

解决方法

尝试输入createContext：

const FirebaseContext = React.createContext<firebase.app.App | null>(null);

有关更多有用的信息，请参见React TS Cheatsheet。