React中useReducer调用报错：No overload matches this call排查

错误含义 #

“No overload matches this call” 是 TypeScript 的类型校验错误，说明你调用useReducer或dispatch时传入的参数类型，和函数定义的所有重载签名都不匹配，本质是状态类型与 reducer 期望的类型不兼容。

问题根源 #

你的代码里存在两个核心类型不匹配问题：

• reducer 状态类型错误：reducer 接收的state参数用了IContext接口，但IContext包含clearCart方法——而 reducer 只负责管理纯状态数据，clearCart是上下文提供的方法，不属于 reducer 维护的状态。
• initialState 类型推断偏差：initialState没有明确声明类型，TypeScript 推断出的类型不包含clearCart，但 reducer 却期望接收带clearCart的IContext类型，导致useReducer调用时类型不匹配；同时 dispatch 的参数类型也会因为 reducer 类型错误而无法正确推导。

修复步骤及代码 #

1. 拆分状态与上下文接口 #

在 Context 文件中，拆分出 reducer 专属的状态接口，让上下文接口继承这个状态+额外方法：

import React, { JSX, createContext, useContext, useReducer } from "react";
import reducer from "./Reducer";
import { actions } from "./Action";
import cartItems from "../data";

interface ReactEl {
  children: JSX.Element[] | JSX.Element;
}

// 仅包含reducer需要管理的状态数据
interface CartState {
  loading: boolean;
  cart: Map<
    string,
    {
      id: string;
      title: string;
      price: string;
      img: string;
      amount: number;
    }
  >;
}

// 上下文接口：状态数据 + 操作方法
export interface IContext extends CartState {
  clearCart: () => void;
}

const AppContext = createContext({} as IContext);

// 明确initialState的类型为CartState
const initialState: CartState = {
  loading: false,
  cart: new Map(
    cartItems.map((item) => [item.id, { ...item }])
  ),
};

const AppProvider = ({ children }: ReactEl) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  function clearCart() {
    dispatch({ type: actions.clear });
  }

  return (
    <AppContext.Provider value={{ ...state, clearCart }}>
      {children}
    </AppContext.Provider>
  );
};

export const useGlobalContext = () => useContext(AppContext);
export default AppProvider;

2. 修正 reducer 的状态类型 #

在 Reducer 文件中，将state参数的类型改为CartState（而非IContext）：

export enum actions {
  clear = "CLEAR_CART",
  increase = "INCREASE",
  decrease = "DECREASE",
  remove = "REMOVE",
  loading = "LOADING",
  display_items = "DISPLAY_ITEMS",
}

// 导入拆分后的CartState接口
import { actions } from "./Action";
import { CartState } from "./Context";

interface actionType {
  type: actions;
}

const reducer = (state: CartState, action: actionType) => {
  if (action.type === actions.clear) {
    return { ...state, cart: new Map() };
  }
  throw new Error(`No matching type found: ${action.type}`);
};

export default reducer;

额外优化（可选） #

如果后续要给 action 添加 payload（比如increase需要传入商品id），可以扩展 actionType 为联合类型，让类型校验更严格：

// 示例：扩展action类型
type ActionType = 
  | { type: actions.clear }
  | { type: actions.increase; payload: string } // 传入商品id
  | { type: actions.decrease; payload: string };

const reducer = (state: CartState, action: ActionType) => {
  switch(action.type) {
    case actions.clear:
      return { ...state, cart: new Map() };
    case actions.increase:
      // 处理逻辑
      return state;
    default:
      throw new Error(`No matching type found: ${action.type}`);
  }
};

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