如何在Redux Toolkit API Slice中访问错误对象的data.message？

你遇到的问题根源在于useGetUserInfoQuery返回的error是FetchBaseQueryError | SerializedError的联合类型：

• FetchBaseQueryError对应HTTP请求层面的错误（比如500状态码），包含后端返回的data属性
• SerializedError对应客户端内部错误（比如请求取消、数据序列化失败），不存在data属性

TypeScript无法确定error的具体类型，因此直接访问error.data会触发类型报错，非空断言也无法绕过——因为本质是没有完成类型窄化的问题。

解决方案：通过类型窄化处理错误 #

方法1：使用RTK内置的类型守卫函数

Redux Toolkit Query提供了isFetchBaseQueryError工具函数，可以直接用来判断错误类型：

先导入该函数：

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

然后在代码中判断并访问错误信息：

const { data, isLoading, error } = useGetUserInfoQuery();

if (error) {
  if (isFetchBaseQueryError(error)) {
    // 此时TypeScript会自动将error类型窄化为FetchBaseQueryError
    const displayMessage = error.data?.message || '请求失败，请稍后重试';
    console.log(displayMessage);
  } else {
    // 处理客户端内部错误的场景
    console.log('发生未知错误');
  }
}

方法2：自定义类型守卫

如果需要更精准地匹配后端返回的错误结构，可以自定义类型守卫函数：

// 定义符合后端错误格式的类型
interface ApiError {
  status: number;
  data: {
    status: string;
    message: string;
  };
}

// 自定义类型守卫，判断错误是否符合后端返回结构
function isApiError(error: unknown): error is ApiError {
  return (
    typeof error === 'object' &&
    error !== null &&
    'status' in error &&
    typeof (error as ApiError).status === 'number' &&
    'data' in error &&
    typeof (error as ApiError).data === 'object' &&
    (error as ApiError).data !== null &&
    'message' in (error as ApiError).data
  );
}

// 使用自定义类型守卫
if (error && isApiError(error)) {
  console.log(error.data.message);
} else {
  console.log('请求出错');
}

方法3：谨慎使用类型断言

如果你能明确当前场景下的错误一定是HTTP请求层面的FetchBaseQueryError，可以直接使用类型断言，但这种方式安全性较低，仅适合特定场景：

if (error) {
  const apiError = error as { data: { message: string } };
  console.log(apiError.data.message);
}

内容的提问来源于stack exchange，提问作者four-eyes