TypeScript中React Hook Form传入map的name调用register报错如何解决？

问题原因 #

你为useForm指定了泛型Inputs后，register函数要求入参必须是Inputs的键名联合类型'fullname' | 'email' | 'password' | 'passwordConfirmation'。而你当前FormFieldType中name字段的类型是通用string，二者类型不匹配触发了TypeScript报错。

解决方案 #

方案1：修改类型定义（推荐，从根源解决类型问题） #

1. 调整通用FormFieldType为泛型，适配不同表单的字段类型：

// utils/formFieldType.ts
export type FormFieldType<T extends Record<string, any>> = {
  id: string;
  name: keyof T;
  label: string;
  placeholder: string;
  type: string;
  passwordField?: boolean;
  // 保留其他你原有定义的属性
}

2. 为注册页的表单配置getFormFields绑定对应类型，可先把组件内的Inputs类型抽为公共类型避免循环依赖：

// constants/pages/register.ts
import { FormFieldType } from "utils/formFieldType";

export type RegisterInputs = {
  fullname: string;
  email: string;
  password: string;
  passwordConfirmation: string;
};

export const getFormFields: FormFieldType<RegisterInputs>[] = [
  // 你原有表单配置内容无需修改，仅补充上方的类型标注即可
];

修改后getFormFields遍历出来的name天然符合register的入参类型要求，无需额外处理即可正常使用。

方案2：临时类型断言（适合快速修复场景） #

如果不想修改通用类型定义，可以在调用register时直接对name做类型断言：

<Input
  {...register(name as keyof Inputs)}
  label={label}
  id={id}
  name={name}
  key={index}
  placeholder={placeholder}
  type={type}
  passwordField={passwordField}
/>

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