如何在React Hook Form+MUI中允许空字符串默认值且Zod验证拒绝？

核心问题拆解 #

要同时满足三个需求：

• 初始值设为空字符串（避免TypeScript报错）
• Material UI Select不抛出值越界警告
• Zod验证拒绝空字符串，仅接受合法血型值

最优实现方案 #

1. 定义血型枚举与表单类型

先明确合法血型的枚举和表单值类型，包含空字符串作为初始状态：

const BLOOD_TYPES = ['A+', 'A-', 'B+', 'B-', 'AB+', 'AB-', 'O+', 'O-'] as const;
type BloodType = (typeof BLOOD_TYPES)[number];

// 表单值类型：允许初始空字符串，最终提交为合法血型
type FormValues = {
  bloodType: BloodType | '';
};

2. Zod Schema 配置（无需额外refine）

通过transform将空字符串转为undefined，再通过pipe强制验证合法血型，既满足初始值类型，又保证提交时的合法性：

import { z } from 'zod';

const formSchema = z.object({
  bloodType: z
    .string()
    // 将初始空字符串转为undefined，适配后续required验证
    .transform(val => val === '' ? undefined : val)
    // 强制验证必须是合法血型，同时给出错误提示
    .pipe(z.enum(BLOOD_TYPES, {
      required_error: '请选择血型',
      invalid_type_error: '请选择有效的血型'
    }))
});

3. Material UI Select 组件处理

给Select添加隐藏的空选项，避免MUI抛出值越界警告，同时不影响用户体验：

import { useForm, Controller } from 'react-hook-form';
import { Select, MenuItem, FormControl, InputLabel } from '@mui/material';
import { zodResolver } from '@hookform/resolvers/zod';

export const BloodTypeForm = () => {
  const { control, formState: { errors } } = useForm<FormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      bloodType: '' // 初始空字符串，无TS报错
    }
  });

  return (
    <FormControl error={!!errors.bloodType} fullWidth>
      <InputLabel>血型</InputLabel>
      <Controller
        name="bloodType"
        control={control}
        render={({ field }) => (
          <Select {...field} label="血型">
            {/* 隐藏空选项，解决MUI值越界警告 */}
            <MenuItem value="" style={{ display: 'none' }} />
            {BLOOD_TYPES.map(type => (
              <MenuItem key={type} value={type}>{type}</MenuItem>
            ))}
          </Select>
        )}
      />
      {errors.bloodType && <span style={{ color: '#d32f2f' }}>{errors.bloodType.message}</span>}
    </FormControl>
  );
};

方案优势 #

• 完全符合TypeScript类型要求，无类型报错
• Material UI不再抛出值越界警告
• Zod验证逻辑清晰，用transform+pipe贴合Zod的链式API设计，替代临时的refine方案
• 用户体验不受影响，初始状态无空白选项显示

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