在react-hook-form中如何修改Zod数组的自定义错误提示？

当复选框组未勾选时，React-Hook-Form会将字段值设为null，而Zod的z.array()默认不接受null类型，因此触发默认的"Expected array, received null"错误。以下两种方法可设置自定义友好提示：

方法1：用preprocess转换null为空数组 #

通过z.preprocess将null值转换为空数组，让Zod继续执行后续的min(1)验证，从而触发自定义提示：

promotion: z.object({
  id: z.string().optional(),
  name: z.string({
    required_error: "请填写活动名称",
    invalid_type_error: "请填写活动名称",
  }).min(1, "请填写活动名称").max(150, "活动名称不能超过150字符"),
  email: z.string({
    required_error: "请填写邮箱",
    invalid_type_error: "邮箱格式无效",
  }).email("邮箱格式无效").min(1, "请填写邮箱"),
  promos: z.preprocess(
    // 将null转换为空数组
    (val) => val ?? [],
    z.array(
      z.string({
        required_error: "请选择促销活动",
        invalid_type_error: "促销选项格式无效"
      })
    ).min(1, "请至少选择一个促销活动")
  ),
}),

方法2：允许null并设置类型错误提示 #

先通过.nullable()允许null值，再用.transform()转为空数组，同时给z.array()设置自定义invalid_type_error：

promotion: z.object({
  id: z.string().optional(),
  name: z.string({
    required_error: "请填写活动名称",
    invalid_type_error: "请填写活动名称",
  }).min(1, "请填写活动名称").max(150, "活动名称不能超过150字符"),
  email: z.string({
    required_error: "请填写邮箱",
    invalid_type_error: "邮箱格式无效",
  }).email("邮箱格式无效").min(1, "请填写邮箱"),
  promos: z.array(
    z.string({
      required_error: "请选择促销活动",
      invalid_type_error: "促销选项格式无效"
    })
  )
  .nullable()
  .transform((val) => val ?? [])
  .min(1, "请至少选择一个促销活动")
  .invalid_type_error("请至少选择一个促销活动"),
}),

效果说明 #

两种方法都能让未勾选复选框时，显示自定义的"请至少选择一个促销活动"提示，替代Zod默认的"Expected array, received null"错误。

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