Next.js/React.js：结合useContext使用useReducer时遇重载错误

这个错误的核心是TypeScript无法正确推断useReducer的类型参数，导致reducer被误判为无action的reducer，同时initialState的类型推断异常。以下是具体解决步骤：

1. 明确类型定义，确保类型一致性 #

首先要保证state类型、action类型和reducer的返回类型完全匹配：

// 定义商品类型
type CartProductType = {
  id: string;
  price: number;
  quantity: number;
  // 其他商品属性
};

// 定义全局state类型
type UserState = {
  id: string;
  name: string;
  userName: string;
  cart: CartProductType[]; // 避免使用undefined，初始化为空数组更安全
  cartItemsCount: number;
  cartItemsTotalPrice: number;
};

// 定义action类型，用联合类型枚举所有可能的action
type AppReducerAction = 
  | { type: 'ADD_TO_CART'; payload: CartProductType }
  | { type: 'REMOVE_FROM_CART'; payload: string }
  | { type: 'UPDATE_CART_ITEM'; payload: { id: string; quantity: number } }
  // 其他action类型
;

2. 严格约束reducer的输入输出类型 #

确保reducer的参数和返回值都严格符合定义的类型，避免返回不完整或类型不匹配的state：

const appReducer = (state: UserState, action: AppReducerAction): UserState => {
  switch (action.type) {
    case 'ADD_TO_CART':
      // 处理添加逻辑，返回完整的UserState
      return {
        ...state,
        cart: [...state.cart, action.payload],
        cartItemsCount: state.cartItemsCount + 1,
        cartItemsTotalPrice: state.cartItemsTotalPrice + action.payload.price
      };
    case 'REMOVE_FROM_CART':
      const updatedCart = state.cart.filter(item => item.id !== action.payload);
      return {
        ...state,
        cart: updatedCart,
        cartItemsCount: updatedCart.length,
        cartItemsTotalPrice: updatedCart.reduce((total, item) => total + item.price, 0)
      };
    // 其他action处理
    default:
      // 必须返回原始state，避免类型错误
      return state;
  }
};

3. 显式指定useReducer的泛型参数 #

手动指定useReducer的泛型，帮TypeScript明确state和action的类型，避免自动推断错误：

import { useReducer } from 'react';

// 初始化state，严格符合UserState类型
const initialState: UserState = {
  id: '',
  name: '',
  userName: '',
  cart: [],
  cartItemsCount: 0,
  cartItemsTotalPrice: 0
};

// 显式指定泛型：React.Reducer<StateType, ActionType>
const [state, dispatch] = useReducer<React.Reducer<UserState, AppReducerAction>>(
  appReducer,
  initialState
);

常见排查点 #

• 检查reducer的所有分支是否都返回了完整的UserState，不能遗漏任何属性
• 确保initialState的每个属性类型都和UserState定义一致，比如cart不能是undefined（除非类型里明确允许）
• 避免在action类型中遗漏可能的action类型，否则TypeScript会认为reducer可能接收到未处理的action，导致类型推断异常

内容的提问来源于stack exchange，提问作者Mohd Maaz Shaikh