React中使用useForm遇到TypeScript类型错误：Property 'message' does not exist on type 'never'

嘿，我看你在React里用useForm的时候碰到了TypeScript的类型报错——Property 'message' does not exist on type 'never'，而且你说代码跑起来没毛病，但类型检查这关过不去是吧？我之前做项目的时候也踩过一模一样的坑，给你唠唠怎么解决～

首先得搞明白为啥会出现这个错：你现在的代码里，不管是传给错误处理函数的errors参数，还是组件里直接用的errors对象，TypeScript都没法准确推断它的结构——要么是你没给useForm指定表单字段的类型，要么是工具函数的参数类型写得太宽泛（比如直接用object），导致TypeScript把不存在的错误字段推断成了never类型，当你想访问它的message属性时自然就报错了。

给你几个具体的解决步骤：

• 第一步：给表单定义明确的类型接口
  先把你的表单所有字段的类型都定义清楚，比如你有用户名、邮箱这两个字段，就这么写：

interface FormInputs {
  username: string;
  email: string;
  // 把你实际用到的表单字段都加进来
}

然后在调用useForm的时候，把这个接口作为泛型传进去：

const { register, formState: { errors } } = useForm<FormInputs>();

这样errors对象的类型就和你的表单字段绑定了，TypeScript能清楚知道每个字段可能的错误结构。

• 第二步：修正你的错误提示工具函数的类型
  你之前写的错误处理函数里，参数errors: object太模糊了，TypeScript完全不知道里面有啥。换成react-hook-form提供的FieldErrors类型，并且加上泛型约束，这样函数就能正确识别错误结构：

import { FieldErrors } from 'react-hook-form';

export const error = <T extends object>(errors: FieldErrors<T>, control: keyof T) => {
  // 先判断当前字段有没有错误
  const fieldError = errors[control];
  // 如果没错误或者错误状态为false，就返回null
  if (!fieldError || fieldError === false) {
    return null;
  }
  // 现在fieldError的类型就正确了，能直接访问message属性
  return <div className="text-danger">{fieldError.message}</div>;
};

• 第三步：调用函数时用正确的字段名
  调用这个错误处理函数的时候，第二个参数要传你在FormInputs里定义的字段名（比如'username'），不能瞎传字符串，这样TypeScript还能帮你检查有没有写错字段名，一举两得。

对了，提醒你一句：别图省事用as any把错误类型强行掩盖过去，虽然当时能解决报错，但会失去TypeScript的类型保护，后期改代码很容易出问题。

内容来源于stack exchange