React Context结合TypeScript使用时出现类型错误求助

嗨，这个问题我之前也踩过坑！核心原因其实是你没有给FilterContext定义正确的类型——当你用createContext创建上下文的时候，如果不指定明确的类型，TypeScript会默认把它的类型推断为never，这就导致你传入的[todos, setTodos]（类型是[Todo[], React.Dispatch<React.SetStateAction<Todo[]>>]）和never类型不兼容，所以才会报错。

给你两个关键的修复步骤：

1. 给FilterContext指定匹配的类型 #

首先要明确你要通过上下文传递的内容结构，这里是一个包含todos数组和setTodos setter函数的元组，先定义这个类型再创建上下文：

import { createContext, useState, ReactNode } from 'react';

// 定义Context的类型：完全匹配你要传递的[todos, setTodos]结构
type FilterContextType = [
  Todo[],
  React.Dispatch<React.SetStateAction<Todo[]>>
];

// 创建Context时指定类型，同时给一个符合类型的默认值（空数组+空函数）
const FilterContext = createContext<FilterContextType>([[], () => {}]);

要是不想写空函数当默认值，也可以用类型断言：createContext<FilterContextType>(null as unknown as FilterContextType)，不过更推荐用符合类型的默认值，类型安全性更高。

2. 优化组件的类型定义 #

另外，把Props里的children类型从any改成React.ReactNode会更规范，这是React官方定义的合法子元素类型，比any更严谨：

interface Todo {
  id: number;
  name: string;
}

// 规范children的类型
type Props = {
  children: React.ReactNode;
};

// 建议把组件名改成TodoContextProvider，和Context名区分开，可读性更强
function TodoContextProvider({ children }: Props) {
  const [todos, setTodos] = useState<Todo[]>([]);

  return (
    <FilterContext.Provider value={[todos, setTodos]}>
      {children}
    </FilterContext.Provider>
  );
}

这样改完之后，TypeScript就不会再报类型不兼容的错误了。本质就是要让Context的类型和你传递的value类型完全匹配，TypeScript才会认可。

备注：内容来源于stack exchange，提问作者Sjoerd