如何用TypeScript+createAsyncThunk获取参数ID调用后端单资源接口？

错误原因分析 #

你遇到的类型错误核心是createAsyncThunk的泛型参数未正确声明传入参数类型，同时代码存在两处逻辑问题：

1. 未给createAsyncThunk指定传入参数的类型，导致TS推断参数为void，和你期望的string类型冲突
2. Thunk内部错误调用dispatch(getOneTodo())会触发无限循环，且axios请求未拼接todo ID

修正后的todoSlice代码 #

interface TodoState {
  todos: Todo[] | null;
  isFetching: boolean;
  singleTodo: Todo | null;
  errors: any;
}

// 泛型参数：<返回值类型, 传入参数类型>
export const getOneTodo = createAsyncThunk<Todo, string>(
  'TODO/FETCHONE',
  async(todoId, thunkApi) => {
    try {
      // 拼接todoId到请求URL，对应后端的req.params.id
      const res = await axios.get(`http://localhost:5001/api/todos/${todoId}`);
      return res.data;
    } catch(e) {
      return thunkApi.rejectWithValue(e)
    }
  }
);

// 补充slice的reducer逻辑（完整示例）
const todoSlice = createSlice({
  name: 'todo',
  initialState: {
    todos: null,
    isFetching: false,
    singleTodo: null,
    errors: null
  } as TodoState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(getOneTodo.pending, (state) => {
        state.isFetching = true;
        state.errors = null;
      })
      .addCase(getOneTodo.fulfilled, (state, action) => {
        state.isFetching = false;
        state.singleTodo = action.payload;
      })
      .addCase(getOneTodo.rejected, (state, action) => {
        state.isFetching = false;
        state.errors = action.payload;
      });
  }
});

export default todoSlice.reducer;

调用方式 #

在组件或业务逻辑中调用时，传入具体的todo ID：

import { useDispatch } from 'react-redux';
import { getOneTodo } from './todoSlice';

const dispatch = useDispatch();
// 示例：从路由参数或其他地方获取todo ID后传入
dispatch(getOneTodo('todo-123'));

关键说明 #

• createAsyncThunk<T, A>的泛型中，T是异步操作返回的数据类型，A是调用thunk时传入的参数类型，必须明确声明
• 移除Thunk内部的thunkApi.dispatch(getOneTodo())，避免无限递归调用
• 确保axios请求URL正确拼接todoId，和后端req.params.id的取值逻辑对应

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