React Hook Form传Props引发forwardRef类型错误求助

问题根源 #

未给useRef和forwardRef指定明确的TypeScript类型，导致组件间ref类型不匹配，触发控制台报错。

解决步骤及代码修改 #

1. 父组件：给useRef指定目标元素类型

将父组件中未指定类型的useRef修改为明确指向HTMLDivElement：

// 原代码
// const ref = useRef(null);

// 修改后
const ref = useRef<HTMLDivElement>(null);

2. 子组件：给forwardRef添加泛型参数

给forwardRef添加泛型，明确ref的类型为HTMLDivElement | null，同时规范props类型：

// 原代码
// export const PersonalDetails = forwardRef((props: {...}, ref) => {})

// 修改后
export const PersonalDetails = forwardRef<HTMLDivElement, {
  formData: UserDetails,
  updateFormData: (data: UserDetails) => void,
  handleNext: () => void
}>((props, ref) => {
  // 原有组件逻辑保持不变
})

3. 修复子组件中react-hook-form的Controller用法

原代码中Controller组件错误地展开了register方法，这会导致字段管理冲突，需移除并明确指定name属性：

// 原代码
<Controller
  control={control}
  {...register('dateOfBirth')}
  render={({ field: {onChange, value} }) =>
  (<DatePicker
    value={personalDetails.dateOfBirth.isValid() ? personalDetails.dateOfBirth : value}
    onChange={onChange} />)}
  rules={{
    validate: { required: (value) => STEPS_INPUTS.personalDetails.dateOfBirth.required(value) }
  }}
/>

// 修改后
<Controller
  control={control}
  name="dateOfBirth"
  render={({ field: { onChange, value } }) => (
    <DatePicker
      value={personalDetails.dateOfBirth.isValid() ? personalDetails.dateOfBirth : value}
      onChange={onChange}
    />
  )}
  rules={{
    validate: { required: (value) => STEPS_INPUTS.personalDetails.dateOfBirth.required(value) }
  }}
/>

说明 #

通过明确指定ref的类型，让TypeScript能够正确推断父组件与子组件间的ref传递类型；同时修复Controller的错误用法，避免react-hook-form内部逻辑冲突，即可解决控制台的类型报错问题。

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