React Redux：Typescript环境下RTK Mutation无法读取error.data如何解决

问题原因 #

RTK Query 默认的 error 是 FetchBaseQueryError | SerializedError 联合类型：

• 只有接口实际返回HTTP错误状态码时生成的FetchBaseQueryError才会携带data字段，存储后端返回的响应体
• 前端侧抛出的普通错误（比如网络中断、序列化失败）会生成SerializedError，没有data属性
  因此TS不允许直接访问error.data，避免触发运行时报错。

推荐方案：类型收窄（最安全） #

先定义你的后端错误结构，再通过类型谓词做类型判断，TS会自动识别合法的错误类型：

import { FetchBaseQueryError, SerializedError } from '@reduxjs/toolkit/query/react';

// 定义后端返回的错误结构
interface BackendErrorRes {
  status: string;
  message: string;
}

// 扩展FetchBaseQueryError匹配你的响应结构
interface CustomError extends FetchBaseQueryError {
  data: BackendErrorRes;
}

// 类型谓词判断函数
const isCustomError = (err: FetchBaseQueryError | SerializedError | undefined): err is CustomError => {
  return !!err && 'data' in err && typeof (err as CustomError).data?.message === 'string';
}

在组件中使用时先做判断即可安全访问：

const [createCategory, {isLoading, error }] = useCreateCategoryMutation();

if (isCustomError(error)) {
  // 此处TS不会报错，可直接获取错误信息
  console.log(error.data.message);
}

临时方案：类型断言（不推荐） #

如果只是临时调试，也可以直接做类型断言跳过类型检查，需要自行保证结构符合预期，否则会有运行时报错风险：

const errMsg = (error as FetchBaseQueryError)?.data?.message;

全局配置方案 #

如果所有接口的错误结构都是统一的，可以在创建RTK API时自定义baseQuery的错误类型，避免每个组件重复写判断逻辑：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

// 复用上面定义的CustomError类型
export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  reducerPath: 'api',
  endpoints: (builder) => ({
    // 你的原有endpoint定义
  }),
}) as typeof api & {
  // 全局统一错误类型
  useCreateCategoryMutation: () => [Function, { isLoading: boolean, error?: CustomError }]
  // 其他endpoint也可以按这个格式扩展类型
};

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