如何解决RTK Query Mutation Hook返回error报TypeScript类型错误问题

问题原因 #

Redux Toolkit Query 的 mutation/query 钩子返回的 error 是联合类型 FetchBaseQueryError | SerializedError：

• 正常接口请求返回的服务端错误属于 FetchBaseQueryError 类型，自带 status 和 data 属性，就是你控制台打印的结构
• 另一种是前端代码执行报错、请求没有发出去等场景生成的 SerializedError 类型，只有 name/message/stack 等通用错误属性，没有 data 字段
  所以 TypeScript 不允许你直接访问不确定存在的 data 属性。

解决方案 #

方案1：使用RTK内置类型守卫（最推荐） #

RTK 提供了 isFetchBaseQueryError 类型判断函数，判断通过后 TypeScript 会自动缩窄类型，就可以正常访问 data 属性：
先导入工具函数：

import { isFetchBaseQueryError } from '@reduxjs/toolkit/query/react';

修改错误处理逻辑即可：

if (updateProgramError) {
  enqueueSnackbar('Test message', { variant: 'error' });
  // 加类型守卫缩窄类型
  if (isFetchBaseQueryError(updateProgramError)) {
    console.log(updateProgramError.data?.message);
  }
}

方案2：全局定义接口错误结构（一劳永逸） #

如果你所有后端接口的错误返回结构都是固定的，可以在定义根 ndovuAPI 时给 fetchBaseQuery 指定泛型，全局规定错误的 data 类型：
假设你的错误data结构是{status: string; message: string}，修改你创建ndovuAPI的代码：

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

// 定义你的后端通用错误结构
interface ApiErrorData {
  status: string;
  message: string;
}

export const ndovuAPI = createApi({
  reducerPath: 'ndovuAPI',
  // 给fetchBaseQuery指定错误data的泛型
  baseQuery: fetchBaseQuery<ApiErrorData>({
    baseUrl: '/api', // 保留你原有baseUrl配置即可
  }),
  endpoints: () => ({}),
});

后续所有由这个API生成的钩子返回的FetchBaseQueryError的data都会自动带上你定义的类型，不需要每次都写类型守卫。

方案3：类型断言（仅临时调试用，不推荐） #

如果你确定当前场景的error一定是接口返回的FetchBaseQueryError，可以直接用类型断言跳过TS检查：

console.log((updateProgramError as FetchBaseQueryError)?.data?.message);

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