如何使用Zod将字符串转换为null或数字（适配含"null"值的下拉选择器场景）

我明白你遇到的问题了——你的下拉选框默认选项返回的是字符串"null"，但Zod的nullable()是用来处理真正的null值，不是这种字符串形式的"null"，所以直接用coerce.number().optional().nullable()自然不管用。下面给你两个实用的解决方案，你可以根据自己的表单场景选择：

方案一：用preprocess预处理值（推荐，更贴合Zod的coerce逻辑） #

preprocess可以在Zod执行正式的类型校验前，先修改输入值，刚好适合把字符串"null"转换成真正的null，再交给后面的规则处理：

const selectSchema = z.preprocess((val) => {
  // 把下拉框返回的字符串"null"转成真正的null
  if (val === "null") return null;
  // 其他值保持原样，交给后续的coerce规则处理
  return val;
}, z.coerce.number().nullable({
  invalid_type_error: 'Keine Buchstaben erlaubt. Bitte nur Zahlen oder Dezimalzahlen mit Punkt.'
}).optional());

这个方案的作用： #

• 当你选择默认选项（value="null"）时，预处理会把它转成null，nullable()会直接接受这个值；
• 当你选择Apple/Banana（value="1"/"2"）时，coerce.number()会自动把数字字符串转成对应的数字类型；
• 如果传入了非数字的非法字符串（比如"abc"），会触发你自定义的错误提示；
• optional()用来处理表单未提交该字段的情况（比如用户完全没碰过这个下拉框）。

方案二：用transform手动处理转换 #

如果你想更精细地控制转换逻辑，可以用transform方法，先接收字符串，再手动判断转换：

const selectSchema = z.string()
  .transform((val, ctx) => {
    if (val === "null") return null;
    // 尝试把字符串转成数字
    const num = Number(val);
    // 如果转换失败，添加自定义错误
    if (isNaN(num)) {
      ctx.addIssue({
        code: z.ZodIssueCode.custom,
        message: 'Keine Buchstaben erlaubt. Bitte nur Zahlen oder Dezimalzahlen mit Punkt.'
      });
      // 必须返回z.NEVER来告诉Zod转换失败
      return z.NEVER;
    }
    return num;
  })
  .optional()
  .nullable();

这个方案的优势： #

• 全程手动控制转换和错误抛出，适合需要更复杂判断的场景；
• 同样能把"null"转成null，有效数字字符串转成数字，非法值触发错误。

你可以根据自己的需求选其中一个方案测试，两种都能完美适配你当前的下拉选框场景~

内容来源于stack exchange