React Router 6.4.3的useRouteError返回unknown类型，如何访问其属性？

核心结论 #

类型转换（类型断言）是可行的解决方式，但类型守卫是更安全、更优的方案，能同时兼顾TypeScript的类型检查和运行时的错误校验。

1. 类型断言方案（快速但需谨慎） #

先定义你预期的错误接口：

interface CustomRouteError {
  statusCode?: number;
  message?: string;
  // 根据实际需求添加其他属性
}

然后直接将useRouteError()的返回值断言为该接口：

import { useRouteError } from 'react-router-dom';

const error = useRouteError() as CustomRouteError;

// 此时可直接访问属性
console.log(error.statusCode, error.message);

⚠️ 注意：这种方式没有运行时校验，如果实际返回的错误结构和你定义的接口不符，会导致运行时属性访问错误，适合你能明确控制错误结构的场景。

2. 类型守卫方案（更安全推荐） #

通过自定义类型守卫函数，先在运行时校验错误结构，再让TypeScript自动推断类型：

// 定义错误接口
interface CustomRouteError {
  statusCode?: number;
  message?: string;
}

// 类型守卫函数
function isCustomRouteError(error: unknown): error is CustomRouteError {
  return (
    typeof error === 'object' &&
    error !== null &&
    // 按需添加属性校验逻辑
    ('statusCode' in error || 'message' in error)
  );
}

// 使用示例
import { useRouteError } from 'react-router-dom';

const error = useRouteError();

if (isCustomRouteError(error)) {
  // 这里TypeScript会自动推断error为CustomRouteError类型
  console.log('错误状态码:', error.statusCode);
  console.log('错误信息:', error.message);
} else {
  // 处理不符合预期的错误格式
  console.error('未知错误类型:', error);
}

这种方案既满足了TypeScript的类型约束，又能在运行时避免因错误结构不符导致的崩溃，是生产环境更推荐的做法。

补充说明 #

React Router在内置场景下（比如路由匹配失败、loader/action抛出的错误）返回的错误通常会包含statusCode、message等属性，你可以根据实际业务场景细化类型守卫的校验逻辑，让类型推断更精准。

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