Type 'unknown[]'缺少InitialState属性，React Context value类型报错如何解决？

问题根源 #

你当前的类型不匹配来自三处核心错误：

1. 创建Context时指定的泛型是单个InitialState状态对象类型，但你给Context.Provider的value属性传递的是[state, dispatch]组成的数组，二者类型完全不符。
2. 你定义的InitialState接口中user、avatar字段声明为string类型，但初始值赋值为null，存在类型冲突。
3. useReducer使用了any泛型，没有明确dispatch的类型。

修正步骤 #

1. 先定义Action类型（可根据你实际的reducer逻辑补充更具体的type枚举、payload类型）
2. 定义Context的实际类型，为包含state和dispatch两个元素的元组
3. 修正InitialState的字段类型适配null初始值
4. 替换createContext的泛型为正确的Context类型
5. 给useReducer指定正确的泛型约束，移除any

修正后完整代码 #

import React, { createContext } from "react";
import Reducer from "./reducer";

// 定义Action类型，可根据业务需要扩展更细的类型约束
interface Action {
  type: string;
  payload?: any;
}

// 修正InitialState字段类型，适配null初始值
interface InitialState {
  navigateTo: string;
  user: string | null;
  avatar: string | null;
  dashBoardSelectedMenuItem: string;
}

const initialState: InitialState = {
  navigateTo: "dashboard",
  user: null,
  avatar: null,
  dashBoardSelectedMenuItem: "dashboard",
};

// 定义Context真实类型：由state和dispatch组成的元组
type ContextType = [state: InitialState, dispatch: React.Dispatch<Action>];

// 给createContext指定正确泛型，默认值匹配元组结构
export const Context = createContext<ContextType>([
  initialState,
  () => {}, // 占位用的默认dispatch，实际运行时会被Provider的真实dispatch覆盖
]);

const Store = ({ children }: { children: React.ReactNode }) => {
  // 给useReducer指定正确泛型，移除any
  const [state, dispatch] = React.useReducer(Reducer, initialState);

  return (
    <Context.Provider value={[state, dispatch]}>{children}</Context.Provider>
  );
};

export default Store;

后续使用useContext(Context)取值时，返回值会自动推导为[state, dispatch]的结构，无需额外类型断言。

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