TypeScript下React Context传递useState值出现类型不匹配报错如何解决

你定义的EmployeeContext泛型类型和实际传入Provider的value类型完全不匹配：你声明Context的泛型为EmployeesList[] | null，但实际给Provider的value是包含「状态值+状态更新函数」的二元组[employeeList, setEmployeeList]，TS做类型校验时无法匹配，因此抛出属性缺失的报错。

1. 先定义Context对应value的元组类型

import type { Dispatch, SetStateAction } from 'react';

// 明确Context要传递的是[状态值, 更新函数]的元组
type EmployeeContextType = [
  employeeList: EmployeesList[] | null,
  setEmployeeList: Dispatch<SetStateAction<EmployeesList[] | null>>
];

2. 修改createContext的泛型声明，传入符合类型的默认值

// 这里的默认值仅用于未被Provider包裹时的降级场景，实际使用时会被Provider的value覆盖
export const EmployeeContext = createContext<EmployeeContextType>([
  null,
  () => {}
]);

如果你不想写无意义的默认空函数，也可以用类型断言跳过默认值校验：

export const EmployeeContext = createContext<EmployeeContextType>(null as unknown as EmployeeContextType);

3. 原有Provider的传值代码无需修改，此时[employeeList, setEmployeeList]的类型已经和Context声明的类型完全匹配，报错会自动消除。

你之前添加的null联合类型、设置默认对象都没有解决问题，是因为没有修正Context最根本的类型声明错误：你的Context本质要传递的是状态和更新函数的组合，而不是单独的员工列表数组。

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