如何在Yup无默认值的必填嵌套对象字段场景下安全使用react-hook-form的useWatch？

这个场景其实是react-hook-form和Yup结合时的典型类型矛盾点——Yup的InferType描述的是表单通过验证后的理想值类型，但useWatch返回的是表单的实时未验证值，在用户未填充前，必填字段可能是undefined，但TS却基于InferType认为它一定存在，最终导致运行时错误。我之前也踩过这个坑，下面分享几个既符合TS规范、又能保证运行时安全的解决方案，你可以根据需求选择：

方案一：运行时类型守卫（最简洁的安全方案） #

这是我最常用的方案，完全利用TS的类型窄化特性，不需要修改任何类型定义或schema，只需要在访问字段前加一个简单的运行时检查，TS会自动推断出正确的类型：

const Form = () => {
  const { control } = useForm<FormValues>({
    resolver: yupResolver(Schema),
  });

  const testField = useWatch({ control, name: 'testField' });

  // 🔍 类型守卫：运行时检查是否存在，TS会自动窄化类型
  let a: string | undefined;
  if (testField) {
    // ✅ TS现在知道testField一定是 { id: string }，运行时安全
    a = testField.id;
  } else {
    // 处理字段未填充的情况，比如显示错误提示或设置默认值
    a = undefined;
  }

  return <form></form>;
};

这个方案的核心是：承认运行时可能存在undefined，用类型守卫告诉TS当前值的真实状态，既保持了Yup的严格验证，又保证了运行时安全，完全符合TS的 idiomatic 用法。

方案二：自定义递归Partial类型（编译时强制安全） #

如果你希望在编译阶段就强制自己处理undefined的情况，可以自定义一个递归的MaybeUninitialized类型，把FormValues的所有层级的必填字段转为可选，让TS提前感知到“实时值可能未初始化”：

首先定义递归的类型工具：

// 递归将T的所有对象字段转为可选，基础类型转为T | undefined
type MaybeUninitialized<T> = T extends object
  ? { [K in keyof T]?: MaybeUninitialized<T[K]> }
  : T | undefined;

然后在useWatch时指定返回值类型：

const Form = () => {
  const { control } = useForm<FormValues>({
    resolver: yupResolver(Schema),
  });

  // 🔧 用自定义类型约束useWatch的返回值，TS现在知道testField可能是undefined
  const testField = useWatch({ control, name: 'testField' }) as MaybeUninitialized<FormValues['testField']>;

  // ✅ TS会强制你检查后再访问字段，避免编译时遗漏
  const a = testField?.id; // 可选链语法，运行时安全
  // 或者用if判断：
  if (testField) {
    const b = testField.id;
  }

  return <form></form>;
};

这个方案的优势是把类型安全提前到编译阶段，不会让你有机会写出访问undefined.id的代码，同时完全保留了Yup schema的严格验证和InferType的类型正确性。

方案三：自动生成默认值（彻底消除undefined） #

如果你只是不想手动编写每个必填字段的默认值，可以用工具自动从Yup schema生成默认值，这样useWatch返回的初始值就会符合FormValues的类型，彻底避免undefined：

比如自己写一个简单的默认值生成函数（也可以用第三方库如yup-defaults）：

function generateDefaultValues<T>(schema: any): T {
  if (schema.type === 'string') return '' as unknown as T;
  if (schema.type === 'number') return 0 as unknown as T;
  if (schema.type === 'boolean') return false as unknown as T;
  if (schema.type === 'object') {
    const defaults: Record<string, any> = {};
    for (const key in schema.fields) {
      defaults[key] = generateDefaultValues(schema.fields[key]);
    }
    return defaults as unknown as T;
  }
  return undefined as unknown as T;
}

然后在useForm中使用：

const Form = () => {
  const { control } = useForm<FormValues>({
    resolver: yupResolver(Schema),
    // 🎯 自动生成默认值，不需要手动写每个字段
    defaultValues: generateDefaultValues(Schema) as FormValues,
  });

  // ✅ TS和运行时都认为testField是{ id: string }，直接访问无风险
  const testField = useWatch({ control, name: 'testField' });
  const a = testField.id;

  return <form></form>;
};

这个方案的好处是不需要处理任何undefined的情况，但要注意生成的默认值是否符合你的业务逻辑（比如autocomplete字段的默认值是空对象，后续用户选择后会被覆盖）。

总结最佳实践 #

根据你的需求，我推荐的优先级是：

1. 方案一：如果只需要运行时安全，这是最简洁、最符合TS规范的做法；
2. 方案二：如果希望编译时就强制类型安全，这个方案能帮你提前规避风险；
3. 方案三：如果可以接受自动生成的默认值，这个方案能彻底解决问题，不需要额外的类型检查。

本质上，这个问题的核心是类型系统描述的是“验证后的理想状态”，而运行时是“验证前的中间状态”，我们需要做的就是在这两者之间搭一座桥，上面的方案都能很好地平衡严格验证、类型正确性和运行时安全。

内容来源于stack exchange