React Hook Form中useFieldArray报TypeScript类型错误：Property 'number'不存在

问题根源 #

useFieldArray未正确推断字段类型，默认将fields识别为仅包含id的Record<"id", string>类型，导致访问item.number和item.size时触发TypeScript错误。

解决方案 #

1. 给useFieldArray显式指定泛型类型

直接将ContainerOnHold作为泛型传入useFieldArray，明确每个字段的结构：

const { fields } = useFieldArray<ContainerOnHold>({
  control,
  name: prependKey
});

2. 确保表单上下文关联正确的类型

在使用HookFormProvider的根组件中，给useForm指定InitiateHoldModel泛型，让上下文能正确识别表单字段的结构：

import { HookFormProvider } from "mui-react-hook-form-plus";
import { useForm } from "react-hook-form";
import { InitiateHoldModel } from "./your-interface-path";

function App() {
  const formMethods = useForm<InitiateHoldModel>({
    defaultValues: {
      checked: null,
      containers: [] // 建议初始化为空数组，避免null给useFieldArray带来的兼容问题
    }
  });

  return (
    <HookFormProvider {...formMethods}>
      {/* 你的组件树，包括ReleaseFields */}
    </HookFormProvider>
  );
}

3. 优化列表项的key值

react-hook-form的useFieldArray会自动为每个字段生成唯一id，建议使用item.id作为列表项的key，比index更稳定：

{fields.map((item, index) => (
  <li key={item.id}>
    <HookCheckBox
      {...registerState(`${prependKey}[${index}].checked`)}
    />
    {item.number}
    {item.size}
  </li>
))}

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