React Context结合TypeScript出现value类型不兼容错误求助

错误本质 #

你遇到的是Context类型不匹配问题：

• 创建ProductContext时，createContext({})未指定泛型类型，TypeScript自动推断其类型为Context<{}>（空对象类型）。
• 但后续Provider传入的value是IsProductContext类型，调用useContext时也明确指定了泛型为IsProductContext，这就导致Context<{}>与Context<IsProductContext>类型无法兼容，触发TypeScript类型检查错误。
• 运行时数据能正常显示是因为JS不做类型校验，但TS会严格要求类型一致性，所以抛出报错。

解决方案 #

给createContext明确指定泛型类型为IsProductContext，同时提供符合该接口的默认值：

修改Context创建代码 #

import { createContext } from 'react';
import { IsProductContext, IsProduct } from './你的接口文件路径';

// 提供符合IsProductContext类型的合法默认值
export const ProductContext = createContext<IsProductContext>({
  products: { list: undefined }, // 匹配IsProduct接口结构
  setProducts: () => {}, // 空函数作为默认setter
});

优化useContext调用 #

此时useContext无需手动指定泛型，TS会自动从Context推导类型：

// 移除<IsProductContext>泛型，类型自动匹配
const { products, setProducts } = useContext(ProductContext);

原理说明 #

• 通过createContext<IsProductContext>明确告知TS，该Context的value必须遵循IsProductContext接口定义。
• 提供合法默认值，既满足React Context的规则（组件不在Provider范围内时会使用默认值），也让TS确认默认值类型与泛型一致，彻底消除类型冲突。

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