RTK Query mutation的catch块异常求助：unwrap调用后报TypeError

问题核心 #

你遇到的TypeError: description(...) is undefined，本质是错误对象的结构理解偏差，导致在catch块中调用了不存在的方法或属性。

原因分析 #

1. unwrap()的行为逻辑：调用unwrap()后，RTK Query会解包mutation结果——成功时返回接口数据，失败时直接抛出RTK Query标准错误对象（不会进入then块）。这个错误对象的典型结构是：

   {
     data: 服务器返回的错误内容（如{description: "错误信息"}）,
     status: HTTP状态码,
     statusText: 状态文本,
     // 其他RTK内部字段
   }
   

2. 错误的处理代码：你在catch块中可能写了类似error.description()的代码，但该错误对象并没有description()方法；如果是服务器返回的错误文本，应该访问error.data.description（属性而非方法）。
3. 不使用unwrap()的情况：此时mutation返回的promise始终处于resolved状态，无论成功失败都会进入then块，你看到的错误实际来自返回对象的error字段，但代码未正确处理该字段的结构，导致报错。

解决方案 #

1. 修正catch块的错误访问逻辑 #

确保正确读取错误对象的属性，避免调用不存在的方法：

// 示例1：async/await + try/catch写法
const [mutate] = useMyMutation();

const handleAction = async () => {
  try {
    const response = await mutate(yourParams).unwrap();
    // 成功后的逻辑，比如更新状态、提示成功
  } catch (error) {
    // 用可选链避免空值报错，设置默认提示
    const errorMsg = error.data?.description || '操作失败，请重试';
    dispatch(showAlert(errorMsg));
  }
};

// 示例2：then/catch写法
mutate(yourParams)
  .unwrap()
  .then(response => {
    // 成功逻辑
  })
  .catch(error => {
    const errorMsg = error.data?.description || '请求失败';
    dispatch(showAlert(errorMsg));
  });

2. 检查mutation的错误转换配置 #

如果你的mutation配置了transformErrorResponse，要确保它返回的错误结构符合预期，不要破坏原有对象结构：

// 错误示例：错误修改了error结构，导致后续无法访问data
transformErrorResponse: (response) => {
  return response.data.message;
}

// 正确示例：保留原有结构，按需添加自定义字段
transformErrorResponse: (response) => {
  return {
    ...response,
    customMsg: response.data.description || '未知错误'
  };
}

3. 处理无服务器响应的网络错误 #

如果是断网等无服务器响应的场景，error对象不会有data字段，必须用可选链或默认值兜底：

catch(error) {
  const errorMsg = error.data?.description || error.statusText || '网络异常，请检查连接';
  dispatch(showAlert(errorMsg));
}

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