Redux Toolkit调用AsyncThunk函数出现重载不匹配错误求助

核心问题分析 #

报错的根源有三个：

1. createAsyncThunk 中声明的 state 类型与实际应用的 RootState 不匹配——你的真实 state 里 CurrentRequestId 是 string | undefined 类型，但 thunk 里硬写成了 string，导致类型校验失败。
2. 组件中使用的 dispatch 没有正确适配 thunk 动作的类型，默认的 useDispatch 无法识别 thunk。
3. 点击事件处理函数中定义了异步函数但从未执行，属于逻辑遗漏。

分步解决方案 #

1. 统一 State 类型定义 #

不要在 createAsyncThunk 里手动写 state 结构，直接从 store 导出全局 RootState 类型复用：

首先在 store 文件中导出类型：

// store.ts
import { configureStore } from '@reduxjs/toolkit';
import patientReducer from './patientSlice';
import routerReducer from './routerSlice';

export const store = configureStore({
  reducer: {
    patient: patientReducer,
    router: routerReducer,
  },
});

// 导出全局状态和 dispatch 的类型
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

然后修改 thunk 的类型参数：

import { RootState } from './store';

export const fetchPatientByDocument = createAsyncThunk<
  Patient,
  string,
  { state: RootState }
>(
  'patient/fetchByDocument',
  async (patientdocument: string, { getState, requestId }) => {
    const { CurrentRequestId, loading } = getState().patient;
    // 兼容 CurrentRequestId 为 undefined 的情况
    if (loading !== 'pending' || requestId !== CurrentRequestId) {
      return;
    }
    const RequestURL = `${PatientBaseUrl}Pacientes/3/${patientdocument}`;
    const response = await fetch(RequestURL);
    const data = await response.json();
    return data;
  }
);

2. 使用类型化的 Dispatch #

创建自定义 Hook 来获取适配 thunk 的 dispatch：

// hooks.ts
import { useDispatch } from 'react-redux';
import { AppDispatch } from './store';

export const useAppDispatch = () => useDispatch<AppDispatch>();

在组件中替换默认的 useDispatch：

import { useAppDispatch } from './hooks';

const YourLoginComponent = () => {
  const dispatch = useAppDispatch();
  // ... 其他组件逻辑
};

3. 修复点击事件的函数执行 #

原代码中定义了 fetchPatient 但没有调用，直接简化逻辑：

const handlerButtonclick = async () => {
  if (!patientDocument) return;
  
  try {
    const patientAction = await dispatch(fetchPatientByDocument(patientDocument));
    // 动作成功后再跳转
    navigate(`${patientDocument}/verification`);
  } catch (e) {
    console.error('获取患者信息失败:', e);
    // 这里可以添加错误提示逻辑
  }
};

4. 确保切片状态类型正确 #

检查 patientSlice 中的状态类型定义，保证 CurrentRequestId 允许为 undefined：

// patientSlice.ts
interface PatientState {
  loading: 'idle' | 'pending' | 'succeeded' | 'failed';
  CurrentRequestId: string | undefined;
  // ... 其他状态字段
}

const initialState: PatientState = {
  loading: 'idle',
  CurrentRequestId: undefined,
  // ... 初始值
};

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