RTK Query报错：FetchBaseQueryError/SerializedError无法赋值给ReactNode怎么解决？

RTK Query返回的error是FetchBaseQueryError | SerializedError类型的对象，并非React可直接渲染的ReactNode（比如字符串、React元素），直接把error丢进JSX自然会触发类型错误。你需要从错误对象里提取可渲染的文本内容，具体处理方式如下：

核心思路 #

1. 先判断error是否存在（仅请求失败时才有值）
2. 区分错误类型提取对应信息：
   • FetchBaseQueryError：关联HTTP请求错误，包含后端返回的错误内容、状态码，或是网络请求失败的信息
   • SerializedError：客户端侧错误，比如请求取消、代码异常等

代码示例 #

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

// 优先处理加载状态
if (isLoading) {
  return <div>加载中...</div>;
}

// 提取错误信息的工具函数
const getErrorText = () => {
  if (!error) return '';

  // 处理HTTP请求类错误（FetchBaseQueryError）
  if ('status' in error) {
    // 后端返回字符串格式的错误
    if (typeof error.data === 'string') {
      return error.data;
    }
    // 后端返回JSON格式的错误（比如{ message: '请求参数错误' }）
    if (error.data && typeof error.data === 'object' && 'message' in error.data) {
      return error.data.message;
    }
    // 网络错误或无明确返回内容的情况
    return error.error || `请求失败，状态码：${error.status}`;
  }

  // 处理客户端侧错误（SerializedError）
  return error.message || '发生未知错误';
};

return (
  <div>
    {/* 渲染错误信息 */}
    {error && <div style={{ color: 'red' }}>{getErrorText()}</div>}
    {/* 渲染正常数据 */}
    {data && <div>{/* 这里放置你的数据渲染逻辑 */}</div>}
  </div>
);

进阶优化 #

你还可以根据错误状态码做针对性UI展示，比如：

if ('status' in error) {
  switch (error.status) {
    case 404:
      return '请求的资源不存在';
    case 500:
      return '服务器繁忙，请稍后再试';
    case 'FETCH_ERROR':
      return '网络连接失败，请检查网络设置';
    default:
      return error.error || `请求失败：${error.status}`;
  }
}

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