React useParams传参给API出现[object%20Object]问题及优化方案

请求路径里出现[object%20Object]是URL编码后的[object Object]，本质是你拼接到API路径里的id值不是预期的字符串，而是一个JavaScript对象——JS做隐式字符串转换时，普通对象转字符串的结果就是[object Object]。
90%的同类问题都是这几个原因导致的：

• 没有从useParams()的返回值里解构出具体参数，直接把整个params对象当成id传了
• 调用Redux异步方法时传参格式错误，多包了一层对象但取值时没解构
• 路由定义的参数名和useParams里取的字段名不匹配，拿到的是undefined或者其他内置对象

先确认VesselComponents.js里的参数写法完全正确，注意路由占位符名、useParams解构的字段名必须完全一致：

import { useParams } from 'react-router-dom';
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { fetchComponents } from './ComponentsSlice';

export default function VesselComponents() {
  // 如果路由定义是 /vessels/:vesselId/components，这里就必须解构vesselId，名字不能错
  const { vesselId } = useParams();
  const dispatch = useDispatch();

  useEffect(() => {
    // 确认拿到的是字符串类型的id再发请求，不要传整个params对象
    if (typeof vesselId === 'string') {
      dispatch(fetchComponents(vesselId));
    }
  }, [dispatch, vesselId]);

  // 组件其余渲染逻辑
}

快速排查技巧：传参前打印console.log(typeof vesselId, vesselId)，如果输出类型不是string，说明参数拿取步骤就有问题。

用Redux Toolkit官方推荐的createAsyncThunk封装请求时，参数传递不需要额外包装，直接接收dispatch传入的值即可，ComponentsSlice.js参考写法：

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// createAsyncThunk第二个回调函数的第一个入参，就是dispatch时传入的参数
export const fetchComponents = createAsyncThunk(
  'components/fetchComponents',
  async (vesselId, { rejectWithValue }) => {
    try {
      // 这里拿到的vesselId就是组件里传入的字符串id，直接拼接路径不会出现类型错误
      const res = await fetch(`/api/vessels/${vesselId}/components`);
      if (!res.ok) throw new Error('请求失败');
      return await res.json();
    } catch (err) {
      return rejectWithValue(err.message);
    }
  }
);

const componentsSlice = createSlice({
  name: 'components',
  initialState: {
    list: [],
    loading: false,
    error: null
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchComponents.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchComponents.fulfilled, (state, action) => {
        state.loading = false;
        state.list = action.payload;
      })
      .addCase(fetchComponents.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload;
      })
  }
});

export default componentsSlice.reducer;

如果是手写原生Thunk，传参逻辑更直接：

// 外层函数接收传入的参数，内部异步函数直接使用即可
export const fetchComponents = (vesselId) => async (dispatch) => {
  dispatch({ type: 'components/fetchPending' });
  try {
    const res = await fetch(`/api/vessels/${vesselId}/components`);
    const data = await res.json();
    dispatch({ type: 'components/fetchFulfilled', payload: data });
  } catch (err) {
    dispatch({ type: 'components/fetchRejected', payload: err.message });
  }
};

• 永远不要把useParams()返回的整个params对象直接作为参数传递，必须解构出需要的具体字段再传
• 路由占位符名、useParams解构字段名、异步方法接收的参数名三者保持统一，避免因命名不一致拿错值
• 如果需要传多个请求参数，直接传入普通对象即可，比如dispatch(fetchComponents({ vesselId, page: 1, pageSize: 20 }))，异步方法内解构使用就不会出现类型错误

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