React-Hook-Form中FieldArray设置空数组默认值的类型错误解决

问题原因 #

当你给numbers/emails/socials设空数组[]时，TypeScript会自动推断类型：emails变成never[]，numbers变成{}[]，但useFieldArray要求对应字段是结构明确的对象数组，类型不匹配就会触发报错。

解决方法 #

方法1：定义表单类型接口（推荐）

先明确整个表单的类型结构，给每个数组字段指定元素类型，再用这个类型约束useForm：

// 定义表单字段的完整类型
interface FormValues {
  numbers: { value: string }[]; // 替换成你实际需要的字段结构，比如每个number项的属性
  emails: { email: string }[];
  socials: { platform: string; url: string }[];
  // 其他表单字段...比如name、companyName等
}

// 初始化useForm时指定类型
const { control } = useForm<FormValues>({
  defaultValues: {
    numbers: [],
    emails: [],
    socials: [],
    // 其他字段的默认值...
  },
});

这样TypeScript能准确识别每个数组的元素类型，useFieldArray的name参数就不会有类型冲突了。

方法2：给空数组直接断言类型

如果不想写完整接口，也可以在默认值里给空数组断言具体类型：

const { control } = useForm({
  defaultValues: {
    numbers: [] as { value: string }[],
    emails: [] as { email: string }[],
    socials: [] as { platform: string; url: string }[],
    // 其他字段默认值...
  },
});

这种方式更简洁，但可读性不如定义接口，适合简单场景。

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