React useForm添加默认静态值与动态值时的TS类型错误求助

问题场景 #

使用 React Hook Form 的 useForm 时，配置了固定的 defaultValues：

const {
  register,
  handleSubmit,
  formState: { errors, isSubmitting },
  reset,
  getValues,
} = useForm({
  defaultValues: {
    celebUid, // 来自 props
    fanUid,   // 来自 props
    price,    // 来自 props
  },
});

当尝试注册未在 defaultValues 中定义的动态字段时：

{...register("requestAction", {
  required: "choose a request event",
})}

触发 TypeScript 错误：

Argument of type 'requestAction' is not assignable to parameter of type 'celebUid' | 'fanUid' | 'price'.ts(2345)

不想为所有动态字段都添加默认值，且未设置 defaultValues 时无此错误，需要解决类型冲突。

解决方案 #

1. 显式定义表单类型（推荐） #

手动定义包含固定字段和可选动态字段的类型，传给 useForm 的泛型参数，替代默认的类型推断：

// 定义表单类型：固定字段必填，动态字段设为可选
type FormValues = {
  celebUid: typeof celebUid;
  fanUid: typeof fanUid;
  price: typeof price;
  // 已知动态字段可逐个声明为可选
  requestAction?: string;
  // 兼容未知动态字段，添加索引签名
  [key: string]: unknown;
};

const {
  register,
  handleSubmit,
  formState: { errors, isSubmitting },
  reset,
  getValues,
} = useForm<FormValues>({
  defaultValues: {
    celebUid,
    fanUid,
    price,
  },
});

这样既保留固定字段的类型检查，又允许注册任意动态字段，无需额外添加默认值。

2. 使用宽泛类型兼容所有字段 #

如果表单动态字段极多，不想逐个定义，可以直接用 Record<string, unknown> 作为表单类型，彻底放开字段限制：

const {
  register,
  handleSubmit,
  formState: { errors, isSubmitting },
  reset,
  getValues,
} = useForm<Record<string, unknown>>({
  defaultValues: {
    celebUid,
    fanUid,
    price,
  },
});

缺点是会失去固定字段的严格类型检查，适合字段高度动态的场景。

3. 类型断言应急（不推荐） #

如果只是临时解决单个字段的错误，可以给字段名做类型断言，绕过 TypeScript 检查：

{...register("requestAction" as keyof typeof defaultValues, {
  required: "choose a request event",
})}
// 或更宽松的断言
{...register("requestAction" as string, {
  required: "choose a request event",
})}

这种方法会跳过类型校验，可能隐藏潜在问题，仅适合临时调试或特殊场景。

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