TRPC客户端如何正确转换错误类型以访问指定错误属性？

问题分析 #

TRPC的onError回调参数默认类型为unknown，直接指定TRPCClientErrorLike<AppRouter>会触发类型不兼容报错，因为TypeScript无法保证传入的错误一定属于该类型。同时用any类型会丢失类型校验，也无法安全访问error.error[0].message属性。

解决方案 #

方案1：使用类型守卫（推荐，类型安全）

先定义一个类型守卫函数，判断错误是否属于TRPCClientErrorLike类型，再安全访问目标属性：

import { TRPCClientErrorLike, AppRouter } from "@/server/trpc"; // 替换为你的实际导入路径

// 类型守卫函数
function isTRPCClientError(err: unknown): err is TRPCClientErrorLike<AppRouter> {
  return typeof err === 'object' && err !== null && 'error' in err;
}

// 配置onError回调
queries: {
  refetchOnWindowFocus: false,
  retry: false,
  onError: (error: unknown): void => {
    if (isTRPCClientError(error)) {
      // 可选链避免属性不存在导致报错
      const errorMessage = error.error[0]?.message || '未知错误';
      toast.error(errorMessage);
      router.replace("/home", { scroll: false });
    } else {
      // 处理非TRPC类型的错误
      toast.error('请求失败，请稍后重试');
    }
  },
},

方案2：使用类型断言（简单但需确保类型匹配）

如果能确定回调传入的一定是TRPC客户端错误，可以直接用类型断言转换类型：

import { TRPCClientErrorLike, AppRouter } from "@/server/trpc"; // 替换为你的实际导入路径

// 配置onError回调
queries: {
  refetchOnWindowFocus: false,
  retry: false,
  onError: (error: unknown): void => {
    const trpcError = error as TRPCClientErrorLike<AppRouter>;
    const errorMessage = trpcError.error[0]?.message || '未知错误';
    toast.error(errorMessage);
    router.replace("/home", { scroll: false });
  },
},

关键说明 #

• 不能直接将onError的参数类型声明为TRPCClientErrorLike<AppRouter>，因为TS要求回调参数必须兼容unknown类型，需要在函数内部完成类型校验或转换。
• 使用?.可选链操作符可以避免error.error[0]不存在时抛出运行时错误，提升代码健壮性。

内容的提问来源于stack exchange，提问作者Ignacio García