React+TS使用ContextApi与useReducer出现无匹配重载报错

你遇到的TS类型报错由3处代码问题共同导致：

• initialState未显式声明WorkoutState类型，TS自动推导的初始值类型和useReducer要求的reducer参数类型不匹配
• reducer中ADD_WORKOUT分支的返回值结构不符合WorkoutState定义：你定义的WorkoutAction.payload是整个WorkoutState结构（包含workouts数组的根对象），但代码里把action.payload直接push到state.workouts数组中，导致数组成员类型混合了「单个workout对象」和「整个state对象」，和类型定义冲突
• WorkoutContextProvider组件的参数写法不符合React规范：函数组件接收的props是对象，直接将参数写为children: ReactNode会导致TS将props整体识别为ReactNode，进一步干扰useReducer的类型推导；同时创建Context时未纳入dispatch方法，实际业务使用时无法触发状态更新。

import { createContext, ReactNode, useReducer } from "react";

// 抽离单条workout类型，方便复用
interface Workout {
  _id: string;
  title: string;
  reps: number;
  load: number;
  createdAt: string;
}

interface WorkoutState {
  workouts: Workout[];
}

// 用联合类型拆分不同action的payload类型，避免类型混乱
type WorkoutAction =
  | { type: "GET_ALL_WORKOUTS"; payload: Workout[] }
  | { type: "ADD_WORKOUT"; payload: Workout };

// 显式标注初始状态类型，避免TS自动推导偏差
const initialState: WorkoutState = {
  workouts: []
};

// 定义Context值类型，同时包含状态和派发方法
interface WorkoutContextValue {
  state: WorkoutState;
  dispatch: React.Dispatch<WorkoutAction>;
}

// 初始化Context时传入符合类型的默认值
export const WorkoutContext = createContext<WorkoutContextValue>({
  state: initialState,
  dispatch: () => null
});

// 显式标注reducer返回值类型，保证所有分支返回结构一致
export const workoutReducer = (state: WorkoutState, action: WorkoutAction): WorkoutState => {
  switch (action.type) {
    case "GET_ALL_WORKOUTS":
      return {
        workouts: action.payload
      };
    case "ADD_WORKOUT":
      return {
        workouts: [...state.workouts, action.payload]
      };
    default:
      return state;
  }
};

// 修正组件props写法：从props对象中解构children
export const WorkoutContextProvider = ({ children }: { children: ReactNode }) => {
  const [state, dispatch] = useReducer(workoutReducer, initialState);
  return (
    <WorkoutContext.Provider value={{ state, dispatch }}>
      {children}
    </WorkoutContext.Provider>
  );
};

• 拆分单条数据类型与状态类型，用联合类型精确匹配不同action的payload结构，从根源消除reducer返回值的类型冲突
• 所有涉及状态的变量、函数返回值都显式标注对应类型，避免TS自动推导产生的never类型等不兼容问题
• 修正Context的结构，将dispatch方法纳入Context值，符合实际使用需求
• 调整ContextProvider的参数写法，符合React函数组件的props规范，避免额外的类型干扰

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