Redux+TypeScript报错：期望0个参数，却传入1个

问题根源分析 #

你遇到的报错来自三个核心问题：

• Hook调用位置错误：useAppDispatch是React Hook，不能在事件处理函数内部调用，必须在组件顶层或自定义Hook中使用。
• dispatch调用方式错误：你直接用useAppDispatch(fetchItem(...))，但useAppDispatch返回的是dispatch函数，正确用法是先获取dispatch实例，再用它分发thunk。
• 类型不匹配：e.target.id是字符串类型，而fetchItem需要number类型参数；若AppDispatch类型未正确包含thunk类型，也会触发类型校验失败。

分步解决方案 #

1. 修正组件内dispatch的获取与调用

在组件顶层调用useAppDispatch获取dispatch实例，事件处理函数中用该实例分发thunk，并转换id类型：

const YourComponent = () => {
  // 组件顶层获取dispatch实例
  const dispatch = useAppDispatch();

  const handleFetch = (e: React.MouseEvent<HTMLAnchorElement>) => {
    // 将字符串id转为number类型，匹配fetchItem的参数要求
    const itemId = Number(e.target.id);
    // 用dispatch分发thunk函数
    dispatch(fetchItem(itemId));
  };

  // 组件其他逻辑...
};

2. 确保AppDispatch类型正确配置

检查你的store.ts，确保AppDispatch包含thunk middleware的类型，否则TypeScript会认为dispatch只能处理普通action，无法识别thunk的参数：

// redux/store.ts
import { configureStore } from '@reduxjs/toolkit';
import itemReducer from './slices/itemSlice';

export const store = configureStore({
  reducer: {
    item: itemReducer,
  },
});

// 导出包含thunk类型的AppDispatch
export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;

3. 修正useAppSelector的定义

你的useAppSelector存在语法错误，正确写法是直接赋值给useSelector而非调用它：

// 错误写法
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector()

// 正确写法
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

额外优化：简化fetchItem异步逻辑 #

你代码中await与.then混用，可简化为更清晰的异步写法：

export const fetchItem = createAsyncThunk('item/fetchItem', async (id: number) => {
  const res = await fetch(`${apiUrl}/${id}`);
  const data = await res.json();
  return data;
});

内容的提问来源于stack exchange，提问作者Isa Seferović