React Hook Form+TypeScript：限制fieldName必须存在于Control中

要实现fieldName必须匹配表单已存在字段的约束，核心是通过泛型关联表单值类型与字段名，具体步骤如下：

1. 定义表单值的类型 #

先明确你的表单结构对应的TypeScript类型，比如：

type FormValues = {
  username: string;
  email: string;
  password: string;
};

2. 修改FieldProps为泛型接口 #

把原来的FieldProps改成泛型接口，让它接收表单值类型作为参数，同时约束control和fieldName的类型：

import { Control, Controller } from 'react-hook-form';

interface FieldProps<TFormValues> {
  control: Control<TFormValues>;
  label: string;
  fieldName: keyof TFormValues;
}

这里keyof TFormValues会自动提取表单类型的所有键，确保fieldName只能是这些键中的一个，传入不存在的字段时TypeScript会直接报错。

3. 编写使用泛型Props的组件 #

以封装一个输入组件为例，使用这个泛型接口：

// 示例用Material-UI的TextField，可替换成你项目中的UI组件
import { TextField } from '@mui/material';

export const FormField = <TFormValues>({
  control,
  label,
  fieldName,
}: FieldProps<TFormValues>) => {
  return (
    <Controller
      control={control}
      name={fieldName as keyof TFormValues}
      render={({ field }) => (
        <TextField
          label={label}
          {...field}
          fullWidth
        />
      )}
    />
  );
};

4. 在表单中使用组件 #

在使用FormField时，传入具体的FormValues类型，TypeScript会自动校验fieldName的合法性：

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

const MyForm = () => {
  const { control } = useForm<FormValues>({
    defaultValues: {
      username: '',
      email: '',
      password: '',
    },
  });

  return (
    <div>
      {/* 合法：fieldName是FormValues中的字段 */}
      <FormField<FormValues> control={control} label="用户名" fieldName="username" />
      <FormField<FormValues> control={control} label="邮箱" fieldName="email" />

      {/* 非法：TypeScript会报错，因为"age"不是FormValues的字段 */}
      {/* <FormField<FormValues> control={control} label="年龄" fieldName="age" /> */}
    </div>
  );
};

这样就能在编译阶段就拦截传入不存在字段的错误，避免运行时问题。

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