使用React Query时遇‘类型“Error”无该属性’TypeScript错误

问题 #

在React Query的useMutation钩子执行失败时，尝试显示错误信息，但获取到的error类型为unknown。

mutation代码：

const {
    mutate: mutateRegister,
    error: errorRegister,
    isError: isErrorRegister,
    isSuccess: isSuccessRegister,
    data: dataRegister,
  } = useMutation(register, {
    onSuccess(d, v, c) {
      console.log(d);
      console.log(v);
      console.log(c);
    },
  });

尝试访问错误信息时，出现「属性不存在于类型Error」的错误，相关代码：

{isErrorType(errorRegister) ? <p>{errorRegister.response?.data}</p> : null}

当前的类型守卫函数：

export function isErrorType(error: unknown): error is Error {
    return error instanceof Error;
}

需要解决这个类型报错问题。

解决方案 #

你的类型守卫只判断了error是原生Error类型，但React Query抛出的错误通常是请求库（比如Axios）返回的自定义错误对象，这类错误会包含response等额外属性，而原生Error并没有这些属性，所以TypeScript会报错。

可以按以下步骤调整：

1. 定义自定义错误类型接口 #

根据你使用的请求库，定义包含额外属性的错误类型，比如适配Axios的错误结构：

// 可根据后端返回的错误结构，调整data里的字段
interface RequestError extends Error {
  response?: {
    data: {
      message: string;
      code?: number;
    };
  };
}

2. 更新类型守卫函数 #

让类型守卫不仅判断是Error实例，还要验证是否包含所需的属性：

export function isErrorType(error: unknown): error is RequestError {
  return (
    error instanceof Error &&
    typeof (error as RequestError).response !== 'undefined'
  );
}

如果不确定错误结构，也可以用宽松的方式兼容：

export function isErrorType(error: unknown): error is Error & { response?: { data?: unknown } } {
  return error instanceof Error;
}

3. 安全访问错误属性 #

修改渲染代码，确保属性访问的类型安全：

{isErrorType(errorRegister) ? <p>{errorRegister.response?.data?.message || '请求失败'}</p> : null}

4. 利用React Query泛型强化类型（可选） #

在useMutation中通过泛型明确指定成功返回值、错误、参数的类型，进一步提升类型安全性：

// 先定义对应的类型
type RegisterResponse = { /* 请求成功的返回结构 */ };
type RegisterParams = { /* 传给register函数的参数结构 */ };

const {
  mutate: mutateRegister,
  error: errorRegister,
  // ...其他状态
} = useMutation<RegisterResponse, RequestError, RegisterParams>(register, {
  onSuccess(d, v, c) {
    console.log(d);
  },
});

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