TypeScript中React Context报错：Type 'UserContextType'不是数组类型

错误提示Type 'UserContextType' is not an array type的核心原因是：你在筛选组件中用数组解构的方式获取Context值，但你的UserContextType类型定义并不是数组类型，两者不匹配导致TypeScript构建报错（本地运行可能因类型检查宽松未触发）。

常见错误场景与修正方法 #

场景1：Context类型定义为对象（最常见）

如果你的Context文件是类似这样定义的（将状态和方法封装在对象中）：

// Context文件代码示例
import { createContext, useContext } from 'react';

type UserState = { /* 你的用户状态类型 */ };
type UserContextType = {
  userState: UserState;
  setUserState: React.Dispatch<React.SetStateAction<UserState>>;
};

const UserContext = createContext<UserContextType | undefined>(undefined);

// 自定义Hook示例
export const useUserContext = () => {
  const context = useContext(UserContext);
  if (!context) throw new Error('useUserContext must be used within a UserContextProvider');
  return context;
};

那你在筛选组件中不能用数组解构，应该改用对象解构：

// 筛选组件中正确用法
const { userState, setUserState } = useUserContext();

场景2：你确实想使用数组类型的Context

如果你的设计是把状态和更新方法作为数组传递，那需要修正UserContextType的类型定义为数组：

// 修改Context的类型定义
type UserContextType = [
  UserState,
  React.Dispatch<React.SetStateAction<UserState>>
];

const UserContext = createContext<UserContextType | undefined>(undefined);

此时组件中的数组解构用法就是正确的：

const [userState, setUserState] = useUserContext();

关键检查点 #

• 确认UserContextType的实际类型（是对象还是数组）
• 保证组件中获取Context的解构方式（对象/数组）和类型定义完全匹配

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