在TypeScript中使用Context创建用户数组失败，求排查解决

错误原因 #

你在创建UserContext时传入的初始值不符合ContextValue的类型定义：

• ContextValue是一个包含两个元素的元组：第一个元素必须是User[]（用户对象数组），第二个是对应的状态更新Dispatch函数。
• 但你当前只传了单个User对象作为第一个元素，且完全缺少第二个Dispatch元素，这直接导致TypeScript类型校验失败。

修复后的完整代码 #

import React, {
  Dispatch,
  SetStateAction,
  createContext,
  useState,
  ReactNode,
} from "react";

type Props = {
  children: ReactNode; // 改用ReactNode支持多子元素/文本等更灵活的子内容
};

type User = {
  _id: string;
  firstname: string;
  lastname: string;
};

type ContextValue = [User[], Dispatch<SetStateAction<User[]>>];

// 修正初始值：第一个元素是User数组，第二个是默认空Dispatch函数
export const UserContext = createContext<ContextValue>([
  [
    {
      _id: "0",
      firstname: "Tim",
      lastname: "tom",
    },
  ],
  () => {}, // 默认空函数，避免未被Provider包裹时出现运行时错误
]);

export function UserComponent({ children }: Props) {
  const [users, setUser] = useState<User[]>([]);

  return (
    <UserContext.Provider value={[users, setUser]}>
      {children}
    </UserContext.Provider>
  );
}

export default UserComponent;

关键修正点说明 #

1. 补全初始值结构：将单个User对象放入数组中，同时添加一个默认的空Dispatch函数，确保初始值完全匹配ContextValue的元组类型。
2. 优化children类型：把JSX.Element改为React.ReactNode，让组件支持多个子元素、文本节点等更通用的子内容场景。

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