使用Yup与React Hook Form处理文件验证的类型兼容问题

1. 定义表单类型（TypeScript可选，推荐使用） #

明确表单字段的类型，让React Hook Form、默认值和验证Schema的类型保持一致：

type FormValues = {
  fullname: string;
  image: File | null;
};

2. 调整Yup验证Schema #

允许初始值为null，同时通过自定义验证确保提交时必须是有效的File实例：

const schema = yup.object().shape({
  fullname: yup.string().required("Name is required"),
  image: yup.mixed()
    .nullable() // 允许初始值为null，解决类型冲突
    .required("Image is required") // 确保字段不能为undefined
    .test("valid-file", "Please select a valid image file", (value) => {
      // 验证值必须是File实例，排除null的情况
      return value instanceof File;
    })
});

3. 初始化React Hook Form并指定类型 #

通过泛型指定表单类型，消除类型不兼容错误：

const { control, register, handleSubmit, formState: { errors } } = useForm<FormValues>({
  defaultValues: {
    fullname: "",
    image: null,
  },
  resolver: yupResolver(schema),
});

4. 使用Controller处理文件输入 #

原生<input type="file"/>的value是FileList，直接用register无法正确映射到File | null类型，用Controller可以手动处理值的转换：

<form onSubmit={handleSubmit(onSubmit)}>
  <input type="text" {...register("fullname")} />
  
  <Controller
    name="image"
    control={control}
    render={({ field: { onChange } }) => (
      <input
        type="file"
        onChange={(e) => onChange(e.target.files?.[0] || null)}
      />
    )}
  />

  {/* 显示错误提示 */}
  {errors.image && <p style={{ color: "red" }}>{errors.image.message}</p>}
</form>

核心逻辑说明 #

• nullable()让Yup接受初始的null值，解决默认值与Schema的类型冲突
• 自定义test验证确保提交时必须选择文件（值为File实例），避免nullable()导致必填验证失效
• Controller组件正确处理文件输入的值转换，保证表单值的类型与定义一致

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