React与TypeScript中useReducer报‘no overload matches this call’错误排查

问题重现 #

你编写的React自定义Hook代码在使用useReducer时触发了No overload matches this call错误，移除reducer的state参数类型标注后错误消失，核心疑惑是状态对象与初始状态是否不匹配。

错误原因分析 #

1. 类型绑定缺失：初始状态artistInitState的类型是TypeScript自动推断的，而reducer中state标注的是自定义的ReducerStateType，两者没有显式关联，导致TypeScript认为类型不兼容。
2. reducer分支不完整：你的reducer只处理了ADD类型的action，没有default分支，TypeScript会推断reducer可能返回undefined，与你标注的返回类型ReducerStateType冲突。
3. 笔误影响类型推断：ReducerStateType中topTracks的元素类型少了逗号（{ name: string released: number }），这会导致类型解析错误，进一步干扰useReducer的类型校验。
4. action类型硬编码：setProfile中dispatch的action type用了字符串"ADD"，而非定义的常量ARTIST_REDUCER_TYPES.ADD，虽然功能正常，但会削弱类型检查的可靠性。

修正后的完整代码 #

import { useCallback, useReducer } from "react";

const ARTIST_REDUCER_TYPES = {
  ADD: "ADD",
} as const;

type ActionReturnedTypes = typeof ARTIST_REDUCER_TYPES[keyof typeof ARTIST_REDUCER_TYPES];

// 修复topTracks元素的逗号问题，显式定义状态类型
type ReducerStateType = {
  artist: { name: string };
  albums: { name: string; released: number }[];
  topTracks: { name: string; released: number }[];
};

type ReducerAction = {
  type: ActionReturnedTypes;
  payload: ReducerStateType;
};

// 给初始状态显式指定ReducerStateType，绑定类型关系
const artistInitState: ReducerStateType = {
  artist: { name: "" },
  albums: [{ name: "", released: 0 }],
  topTracks: [{ name: "", released: 0 }],
};

export const useArtistResults = (initialState: ReducerStateType = artistInitState) => {
  const [artistDetails, dispatch] = useReducer(
    (state: ReducerStateType, action: ReducerAction): ReducerStateType => {
      switch (action.type) {
        case ARTIST_REDUCER_TYPES.ADD: {
          if (!action.payload) {
            throw new Error("ADD action requires a payload");
          }

          return {
            ...state,
            artist: action.payload.artist,
            albums: action.payload.albums,
            topTracks: action.payload.topTracks,
          };
        }
        // 添加default分支，避免返回undefined
        default:
          throw new Error(`Unsupported action type: ${action.type}`);
      }
    },
    initialState
  );

  const setProfile = useCallback(
    // 给参数添加类型标注，确保与状态类型匹配
    (
      artist: ReducerStateType["artist"],
      albums: ReducerStateType["albums"],
      topTracks: ReducerStateType["topTracks"]
    ) => {
      dispatch({
        type: ARTIST_REDUCER_TYPES.ADD, // 使用常量而非硬编码字符串
        payload: { artist, albums, topTracks },
      });
    },
    []
  );

  return { artistDetails, setProfile }; // 补充Hook的返回值，避免语法错误
};

关键修复点说明 #

• 给artistInitState显式指定ReducerStateType，让初始状态与reducer的state类型完全绑定。
• 修复ReducerStateType中的语法错误（元素属性间的逗号）。
• 为reducer添加default分支，保证无论什么action类型都能返回符合要求的状态或抛出明确错误。
• setProfile的参数添加类型标注，同时使用定义的action类型常量，强化类型安全。
• 给useArtistResults的参数设置默认值，让Hook可以无需传入初始状态直接使用。

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