React Hook Form中register属性的TypeScript类型定义问题

核心思路 #

问题根源在于你给register指定了固定的UseFormRegister<FieldValues>类型，而父组件的register是绑定了具体表单结构的UseFormRegister<FormValues>，二者类型不匹配。正确做法是让自定义组件支持泛型，适配任意表单值类型，同时约束name属性为表单值的合法键，既解决类型兼容问题，又提升类型安全性。

分步修改代码 #

1. 修改 Input.tsx

添加泛型参数，约束name为表单值的键，register类型绑定泛型：

import { HTMLInputTypeAttribute } from 'react';
import { useTranslation } from 'react-i18next';
import { UseFormRegister } from 'react-hook-form';

// 泛型T代表表单值的类型
type InputProps<T> = {
    type: HTMLInputTypeAttribute;
    // 约束name必须是T的键之一，避免传错字段名
    name: keyof T;
    placeholder?: string;
    register: UseFormRegister<T>;
};

// 组件接收泛型T
const Input = <T extends object>({ type, name, placeholder = '', register }: InputProps<T>) => {
    const { t } = useTranslation();

    return <input type={type} placeholder={t(placeholder)} {...register(name as string)} />;
    // 用as string是因为input的name属性要求字符串，实际表单键都是字符串，此转换安全
};

export default Input;

2. 修改 TextField.tsx

同步添加泛型，传递给子组件Input并约束类型：

import { InputHTMLAttributes } from 'react';
import { FieldError, UseFormRegister } from 'react-hook-form';
import Input from './common/Input';
import Error from './common/Error';
import Label from './common/Label';

// 泛型T代表表单值的类型
interface TextFieldProps<T> extends InputHTMLAttributes<HTMLInputElement> {
    label?: string;
    name: keyof T;
    register: UseFormRegister<T>;
    placeholder?: string;
    error?: FieldError;
}

// 组件接收泛型T
const TextField = <T extends object>({ label, name, register, placeholder = '', error }: TextFieldProps<T>) => {
    return (
        <div className="space-y-2">
            <Label label={label} name={name as string} />
            {/* 将泛型T传递给Input组件 */}
            <Input<T> type="text" name={name} register={register} placeholder={placeholder} />
            <Error error={error} />
        </div>
    );
};

export default TextField;

3. Login.tsx 无需额外修改

TypeScript会自动推导泛型T为FormValues——因为LoginRegister是UseFormRegister<FormValues>，传递给TextField时类型完全匹配，不会再出现类型不兼容错误。

方案优势 #

• 泛型让自定义组件不再依赖固定的表单结构，可复用在任意表单场景中。
• name: keyof T的约束能在编译期检查字段名是否合法，避免拼写错误。

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