React-Hook-Form子组件指定字段UseFormReturn类型适配问题

我定义了包含多字段的表单类型：

type FormFields = {
  foo: string,
  bar: string,
}

const form = useForm<FormFields>();

想抽离仅处理foo字段的子组件并保留类型校验：

type FormPickedFields = {
  foo: string,
}
type PickedFieldsProps = {
  form: UseFormReturn<FormPickedFields>
}

const PickedFields = ({ form }: PickedFieldsProps) => {
  return /* 子组件内容 */ 
};

但在父组件传入form实例时触发类型错误：

const AppForm = () => {
  const form = useForm<FormFields>();
  return (
    <form onSubmit={form.handleSubmit(console.log)}>
      <PickedFields form={form} />
    </form>
  );
};

错误核心：UseFormReturn<FormFields>与UseFormReturn<FormPickedFields>不兼容，watch方法的回调参数中，字段name的可选值包含bar，无法匹配子组件仅允许foo的约束。

本地环境：react18.2、react-hook-form^7.51.0、TypeScript5.1.6，CodePen中无法复现该问题。

方案1：泛型约束实现类型兼容（推荐） #

子组件通过泛型约束，接受包含目标字段的任意UseFormReturn实例，既保证类型安全，又避免硬编码类型：

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

type FormFields = {
  foo: string,
  bar: string,
}

// 用Pick推导子组件关心的字段类型，避免重复定义
type FormPickedFields = Pick<FormFields, 'foo'>;

// 泛型约束：form实例的字段必须包含FormPickedFields
type PickedFieldsProps<T extends FormPickedFields> = {
  form: UseFormReturn<T>;
}

const PickedFields = <T extends FormPickedFields>({ form }: PickedFieldsProps<T>) => {
  // 子组件内只能访问foo字段，自动触发类型校验
  const fooValue = form.watch('foo');
  return <input {...form.register('foo')} />;
};

// 父组件无需额外处理，TypeScript自动推导兼容
const AppForm = () => {
  const form = useForm<FormFields>();
  return (
    <form onSubmit={form.handleSubmit(console.log)}>
      <PickedFields form={form} />
    </form>
  );
};

方案2：按需传递API，避免完整实例依赖 #

子组件不接收整个form实例，只传入需要的方法（如register、watch），类型更精准：

import { UseFormRegister, UseFormWatch, useForm } from 'react-hook-form';

type FormFields = {
  foo: string,
  bar: string,
}

type FormPickedFields = Pick<FormFields, 'foo'>;

type PickedFieldsProps = {
  register: UseFormRegister<FormPickedFields>;
  watch: UseFormWatch<FormPickedFields>;
}

const PickedFields = ({ register, watch }: PickedFieldsProps) => {
  const fooValue = watch('foo');
  return <input {...register('foo')} />;
};

// 父组件直接传递所需方法，自动匹配类型
const AppForm = () => {
  const form = useForm<FormFields>();
  return (
    <form onSubmit={form.handleSubmit(console.log)}>
      <PickedFields register={form.register} watch={form.watch} />
    </form>
  );
};

方案3：类型断言（不推荐，仅应急） #

如果需要快速绕过类型检查，可以使用类型断言明确告知TypeScript仅关心目标字段，但可能掩盖真实类型错误：

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

type FormFields = {
  foo: string,
  bar: string,
}

type FormPickedFields = Pick<FormFields, 'foo'>;

type PickedFieldsProps = {
  form: UseFormReturn<FormPickedFields>
}

const PickedFields = ({ form }: PickedFieldsProps) => {
  return <input {...form.register('foo')} />;
};

const AppForm = () => {
  const form = useForm<FormFields>();
  return (
    <form onSubmit={form.handleSubmit(console.log)}>
      <PickedFields form={form as UseFormReturn<FormPickedFields>} />
    </form>
  );
};

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