TypeScript使用useContext时报ContextType|null不可分配给ContextType如何解决

报错原因 #

你在创建StoreContext的时候，指定了类型为ContextType | null，默认值设为null，但在组件中使用useContext读取上下文时，直接将返回值类型声明为ContextType，TS无法保证上下文一定不是null，因此抛出类型不匹配错误。

可行解决方案（按推荐优先级排序） #

1. 封装专用自定义Hook（最推荐，兼顾类型安全和运行时报错提示）

在Store文件中新增一个自定义Hook，对上下文做非空判断：

// 加在Store.txt的导出部分
export const useStore = () => {
  const context = useContext(StoreContext)
  if (context === null) {
    throw new Error('useStore 必须在 StoreProvider 内部使用')
  }
  return context
}

之后在组件里直接用这个Hook即可，不需要额外做类型声明：

// Component.tsx 里替换原来的useContext逻辑
const { state, dispatch } = useStore()

TS会自动推断返回值为ContextType类型，同时如果有组件忘了包Provider，运行时会直接抛出明确的错误提示，方便排查。

2. 加非空断言（简单快捷，适合小型项目）

如果你能100%确定所有用到StoreContext的组件都被StoreProvider包裹，可以直接在useContext后加非空断言，告诉TS这个值不可能是null：

// Component.tsx 中修改
const { state, dispatch }: ContextType = useContext(StoreContext)!

额外兼容修正

注意你Store.ts中reducer的state类型写的是ITodo，但你Models中定义的全局状态类型是ITodos（数组类型），这里是笔误，建议统一修改避免后续报错：

// Store.txt 中修改reducer的参数类型
const reducer = (state: ITodos, action: ACTIONTYPE) => {
  // 原有逻辑不变
}

内容的提问来源于stack exchange，提问作者asd