为何Yup对象无法赋值？React Hook Form类型兼容报错

问题场景 #

使用React Hook Form搭配Yup做表单校验时，编写代码后出现两处类型不兼容错误，导致Yup校验规则无法正常传入resolver。

代码示例 #

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

interface IFormInputs {
    firstName: string; 
}

const validationSchema = Yup.object({
    firstName: Yup.string().required(), 
});

const Form = () => {
    const { register, handleSubmit, formState: { errors } } = useForm<IFormInputs>({
        resolver: yupResolver(validationSchema),
    });

    const onSubmit = (data: IFormInputs) => {
        console.log(data);
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input {...register('firstName')} />
            <p>{errors.firstName?.message}</p>
            <input type="submit" />
        </form>
    );
};

export default Form;

报错信息 #

1. resolver参数类型不兼容

Types of parameters 'options' and 'options' are incompatible.
    Type 'ResolverOptions<IFormInputs>' is not assignable to type 'ResolverOptions<AssertsShape<{ firstName: unknown; }>>'.
      Type 'IFormInputs' is not assignable to type 'AssertsShape<{ firstName: unknown; }>'.ts(2322)
form.d.ts(64, 5): The expected type comes from property 'resolver' which is declared here on type 'Partial<{ mode: keyof ValidationMode; reValidateMode: "onBlur" | "onChange" | "onSubmit"; defaultValues: AsyncDefaultValues<IFormInputs> | { ...; }; ... 9 more ...; delayError: number; }>'

2. yupSchema传入yupResolver时类型缺失

Type 'ObjectSchema<{ firstName: string; }, AnyObject, { firstName: undefined; }, "">' is missing the following properties from type 'ObjectSchema<{ firstName: unknown; }, AnyObject, TypeOfShape<{ firstName: unknown; }>, AssertsShape<{ firstName: unknown; }>>': getDefaultFromShape, __inputType, _isPresentts(2345)

修复方案 #

这些错误本质是React Hook Form、Yup和@hookform/resolvers三个库的版本不匹配，或是未给Yup的Schema指定正确泛型导致的，按以下步骤解决：

步骤1：确保依赖版本兼容 #

优先检查版本是否匹配，目前推荐的兼容组合：

• react-hook-form: ^7.45.0+
• yup: ^1.2.0+
• @hookform/resolvers: ^3.3.0+

版本不匹配时执行更新：

npm install react-hook-form@latest yup@latest @hookform/resolvers@latest
# 或使用yarn
yarn add react-hook-form@latest yup@latest @hookform/resolvers@latest

步骤2：给Yup Schema指定泛型（推荐） #

更新版本后仍有问题的话，显式给Yup的object方法指定与IFormInputs一致的泛型，让类型系统明确校验后的数据结构：

const validationSchema = Yup.object<IFormInputs>({
    firstName: Yup.string().required('请输入姓名'), 
});

步骤3：类型断言兜底（仅临时救急） #

若前两步无效，可使用类型断言强制让TypeScript通过校验（不推荐滥用）：

const { register, handleSubmit, formState: { errors } } = useForm<IFormInputs>({
    resolver: yupResolver(validationSchema as Yup.ObjectSchema<IFormInputs>),
});

修复后的完整代码 #

import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as Yup from 'yup'; // 需完整导入Yup包

interface IFormInputs {
    firstName: string; 
}

// 指定泛型匹配IFormInputs
const validationSchema = Yup.object<IFormInputs>({
    firstName: Yup.string().required('请输入姓名'), 
});

const Form = () => {
    const { register, handleSubmit, formState: { errors } } = useForm<IFormInputs>({
        resolver: yupResolver(validationSchema),
    });

    const onSubmit = (data: IFormInputs) => {
        console.log(data);
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input {...register('firstName')} placeholder="请输入姓名" />
            {errors.firstName && <p style={{color: 'red'}}>{errors.firstName.message}</p>}
            <input type="submit" />
        </form>
    );
};

export default Form;

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