React Hook Form结合Shad CN单个字段注册报错求助

错误原因 #

你用错了form.register的参数格式：register的第二个参数是字段注册配置项（比如校验规则、提示信息等），不是直接传字段的值。你直接传字符串'32427236872ggeghsfwwsfsf'，TypeScript自然会提示类型不匹配。

解决方案 #

有两种正确的方式来处理字段注册和赋值：

方案1：在useForm初始化时设置默认值

把subCategoryId的初始值放到defaultValues里，register只负责绑定字段：

// 整理初始值，加入subCategoryId
const formDefaultValues = initialData 
  ? { ...defaultValues, subCategoryId: '32427236872ggeghsfwwsfsf' } 
  : { 
      ...defaultValues, 
      creatorId: customerId || '', 
      shopId: searchParamsValue || '',
      subCategoryId: '32427236872ggeghsfwwsfsf'
    };

const form = useForm({
  resolver: zodResolver(formSchema),
  defaultValues: formDefaultValues,
});

// 注册字段时只传字段名，或按需加配置项
form.register('subCategoryId', { required: '请选择子分类' });

方案2：用setValue设置字段值，register负责注册

如果需要动态赋值，先注册字段，再用setValue给字段赋值：

const { register, setValue } = useForm({
  resolver: zodResolver(formSchema),
  values: initialData == null ? { ...defaultValues, creatorId: customerId || '', shopId: searchParamsValue || '' } : undefined,
  defaultValues: initialData ? defaultValues : undefined,
});

// 注册字段（第二个参数为可选配置项）
register('subCategoryId');
// 动态设置字段值
setValue('subCategoryId', '32427236872ggeghsfwwsfsf');

额外提示 #

• 尽量不要混用values和defaultValues，React Hook Form建议优先用defaultValues设置初始值，values一般用于从外部状态（比如URL参数、API返回值）初始化表单时使用。
• 确保你的formSchema里定义的subCategoryId字段类型和你传入的值类型一致，字段名也要完全匹配。

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