React Hook Form联合类型UseFormSetValue失效原因及解决方案咨询

为什么联合类型UseFormSetValue<FormAType | FormBType>不生效？ #

UseFormSetValue<T>的类型定义中，第一个参数要求是keyof T（即T类型的所有键）。当T是FormAType | FormBType联合类型时，keyof (FormAType | FormBType)等价于keyof FormAType & keyof FormBType——也就是两个表单类型共有的字段。如果你的复用组件调用setValue时用到了某一个表单独有的字段，TypeScript就会报错，因为它无法确认这个字段在另一个表单类型中存在。

可行解决办法 #

1. 泛型组件（推荐，保留类型安全） #

将复用组件改为泛型组件，让它接收具体的表单类型，这样setValue的类型会自动匹配对应表单的UseFormSetValue<T>：

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

// 定义泛型组件 props
type ReusableFormProps<T> = {
  setValue: UseFormSetValue<T>;
};

// 泛型组件实现
const ReusableFormComponent = <T extends object>({ setValue }: ReusableFormProps<T>) => {
  // 组件内可以安全调用 setValue，TS 会根据传入的 T 校验字段
  const handleUpdate = () => {
    // 假设当前传入的是 FormAType，这里就能正常使用 FormAType 的字段
    setValue('fieldA', 'new value');
  };

  return <button onClick={handleUpdate}>更新字段</button>;
};

// 使用时传入具体表单类型
<ReusableFormComponent<FormAType> setValue={setValueA} />
<ReusableFormComponent<FormBType> setValue={setValueB} />

2. 直接用setValue的联合类型（需类型窄化） #

如果不想用泛型，可以将setValue的类型定义为UseFormSetValue<FormAType> | UseFormSetValue<FormBType>，但需要在组件内通过标识窄化类型，避免类型断言滥用：

type ReusableFormProps = {
  setValue: UseFormSetValue<FormAType> | UseFormSetValue<FormBType>;
  formType: 'A' | 'B'; // 增加标识区分表单类型
};

const ReusableFormComponent = ({ setValue, formType }: ReusableFormProps) => {
  const handleUpdate = () => {
    if (formType === 'A') {
      // 此时 TS 能确认是 FormAType 的 setValue
      setValue('fieldA', 'new value');
    } else {
      // 此时 TS 能确认是 FormBType 的 setValue
      setValue('fieldB', 'new value');
    }
  };

  return <button onClick={handleUpdate}>更新字段</button>;
};

3. 提取公共字段类型（仅适用于组件只操作公共字段场景） #

如果复用组件只需要操作两个表单的公共字段，可以先定义公共字段类型，再基于它标注setValue：

// 提取两个表单的公共字段
type CommonFormFields = {
  commonField: string;
};

type ReusableFormProps = {
  setValue: UseFormSetValue<CommonFormFields>;
};

const ReusableFormComponent = ({ setValue }: ReusableFormProps) => {
  const handleUpdate = () => {
    setValue('commonField', 'new value');
  };

  return <button onClick={handleUpdate}>更新公共字段</button>;
};

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