React Context报错：Type 'any[]'缺少id、name、persnr属性

错误信息 #

Type 'any[]' is missing the following properties from type '{ id: string; name: string; persnr: string; }': id, name, persnr

        28 |
        29 |     return (
      > 30 |         <ChatContext.Provider value={[chatPartner, dispatch]}>
           |                               ^
        31 |             {props.children}
        32 |         </ChatContext.Provider>
        33 |     );

问题根源 #

你创建ChatContext时，传入的初始值是initialState（一个包含id/name/persnr的对象），但在ChatContext.Provider里传递的value却是数组[chatPartner, dispatch]，TypeScript检测到两者类型完全不匹配，因此抛出错误。

修复步骤 #

• 定义正确的类型别名：明确Context的类型应该包含状态对象和dispatch函数，同时给reducer的state和action指定类型

  // 聊天伙伴状态类型
  type ChatPartnerState = {
    id: string;
    name: string;
    persnr: string;
  };
  
  // reducer动作类型
  type ChatAction = 
    | { type: "SET_SELECTED_CHAT"; payload: ChatPartnerState }
    | { type: "RESET_SELECTED_CHAT" };
  
  // Context的完整类型：[状态对象, dispatch函数]
  type ChatContextType = [ChatPartnerState, React.Dispatch<ChatAction>];
  

• 修正Context的初始值：让createContext的初始值符合ChatContextType类型

  export const ChatContext = createContext<ChatContextType>([initialState, () => {}]);
  

  这里第二个参数是空函数，作为dispatch的占位，useReducer会返回真实的dispatch函数。

• 给reducer添加类型约束：替换原来的any类型，确保类型安全

  const reducer = (state: ChatPartnerState, action: ChatAction) => {
    switch (action.type) {
      case "SET_SELECTED_CHAT":
        return action.payload;
      case "RESET_SELECTED_CHAT":
        return {
          id: '',
          name: '',
          persnr: '',
        };
      default:
        return state; // 返回当前state而非initialState更合理
    }
  };
  

• 修正组件props类型：给ChatContextProvider的props指定明确类型，避免any

  export const ChatContextProvider = (props: { children: React.ReactNode }) => {
    // ... 原有逻辑
  };
  

完整修复代码 #

import React, { useReducer, createContext, Dispatch } from "react";

// 定义聊天伙伴的状态类型
type ChatPartnerState = {
  id: string;
  name: string;
  persnr: string;
};

// 定义reducer的动作类型
type ChatAction = 
  | { type: "SET_SELECTED_CHAT"; payload: ChatPartnerState }
  | { type: "RESET_SELECTED_CHAT" };

// 定义Context的完整类型
type ChatContextType = [ChatPartnerState, Dispatch<ChatAction>];

const initialState: ChatPartnerState = {
  id: '',
  name: '',
  persnr: '',
};

// 初始化Context并指定类型
export const ChatContext = createContext<ChatContextType>([initialState, () => {}]);

const reducer = (state: ChatPartnerState, action: ChatAction) => {
  switch (action.type) {
    case "SET_SELECTED_CHAT":
      return action.payload;
    case "RESET_SELECTED_CHAT":
      return {
        id: '',
        name: '',
        persnr: '',
      };
    default:
      return state;
  }
};

export const ChatContextProvider = (props: { children: React.ReactNode }) => {
  const [chatPartner, dispatch] = useReducer(reducer, initialState);

  return (
    <ChatContext.Provider value={[chatPartner, dispatch]}>
      {props.children}
    </ChatContext.Provider>
  );
};

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