React Hook Form结合Yup时TypeScript类型冲突问题求助

核心矛盾拆解 #

你碰到的问题本质是：

• 新增模式下需要用id: null作为初始值，但TypeScript根据Yup的number().required()推断出id必须是number类型，导致类型不匹配
• 直接给id加nullable()会让Yup允许null通过必填校验，违背业务要求

解决方案1：拆分临时值与提交值类型，配合Yup自定义校验 #

这种方式既满足TypeScript类型约束，又保证校验逻辑严格生效：

1. 定义双类型区分场景

// 表单临时值：允许新增时的null初始值
type FormTempValues = {
  name: string; // 空字符串属于string类型，无需额外处理
  id: number | null;
};

// 提交有效值：对应最终校验通过的数据结构
type FormSubmitValues = {
  name: string;
  id: number;
};

2. 调整Yup校验规则
   允许id初始为null，但通过自定义校验排除null值，保证必填逻辑生效：

import * as Yup from 'yup';

const schema = Yup.object().shape({
  name: Yup.string().required('名称不能为空'),
  id: Yup.number()
    .nullable() // 允许初始值为null，解决TypeScript类型冲突
    .required('ID不能为空') // 确保字段不能为undefined
    .typeError('ID必须是有效数字') // 输入非数字时给出提示
    .test('not-null', 'ID不能为空', (value) => value !== null), // 强制排除null值
});

3. 初始化表单并处理提交
   用临时类型设置默认值，提交时通过类型断言转换为有效值：

import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';

const isEditMode = false; // 根据业务逻辑切换模式
const existingData = { name: '测试名称', id: 100 }; // 编辑模式下的已有数据

const defaultValues: FormTempValues = isEditMode 
  ? (existingData as FormTempValues) 
  : { name: '', id: null };

const { register, handleSubmit, formState: { errors } } = useForm<FormTempValues>({
  resolver: yupResolver(schema),
  defaultValues,
});

// 提交时安全断言id为number（Yup已校验通过）
const onSubmit = (data: FormTempValues) => {
  const submitData: FormSubmitValues = {
    ...data,
    id: data.id as number,
  };
  // 执行提交逻辑（如调用后端接口）
  console.log(submitData);
};

解决方案2：简化类型定义，用Yup直接排除null值 #

如果不想拆分类型，可以直接给表单值设置联合类型，配合notOneOf规则：

type FormValues = {
  name: string;
  id: number | null;
};

const schema = Yup.object().shape({
  name: Yup.string().required(),
  id: Yup.number()
    .required('ID不能为空')
    .notOneOf([null], 'ID不能为空') // 直接排除null值
    .typeError('ID必须是数字'),
});

// 初始化表单
const { register, handleSubmit } = useForm<FormValues>({
  resolver: yupResolver(schema),
  defaultValues: isEditMode ? existingData : { name: '', id: null },
});

// 提交时用非空断言（信任Yup校验结果）
const onSubmit = (data: FormValues) => {
  api.submit({ ...data, id: data.id! });
};

避坑提示 #

• 不要用-1这类占位值替代null，会导致业务逻辑混淆（比如后端可能将-1识别为合法ID）
• Yup的nullable()仅表示允许null作为有效值，必须配合test或notOneOf才能实现“必填且不能为null”的逻辑
• TypeScript的类型断言/非空断言仅在确认Yup校验通过时使用，避免运行时错误

内容的提问来源于stack exchange，提问作者Moh3n.As