NextJS+TypeScript中react-hook-form的resolver类型不匹配问题求助

错误原因 #

你的IAuthLogin接口包含is_admin字段，但当前的Yup校验Schema和表单默认值仅定义了email和password，导致Resolver推断出的类型只包含这两个字段，与IAuthLogin的结构不匹配，从而触发类型错误。

解决方案 #

根据is_admin的实际用途，分两种场景处理：

场景1：is_admin是需要用户填写的表单字段

将is_admin补充到Yup Schema和默认值中，确保字段结构与IAuthLogin完全对齐：

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

export interface IAuthLogin {
    email: string;
    password: string;
    is_admin: boolean;
}

// 更新Yup Schema，添加is_admin的校验规则
const schema = yup.object().shape({
    email: yup.string().email().required(),
    password: yup.string().min(8).max(32).required(),
    is_admin: yup.boolean().default(false), // 可根据需求设置为required()或可选
});

const { register, handleSubmit, formState } = useForm<IAuthLogin>({
    defaultValues: {
        email: '',
        password: '',
        is_admin: false, // 添加is_admin的初始值
    },
    resolver: yupResolver(schema),
});

场景2：is_admin不是表单字段（提交时额外补充的参数）

此时无需将is_admin纳入表单类型，可通过以下两种方式调整：

方法A：定义表单专属类型

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

export interface IAuthLogin {
    email: string;
    password: string;
    is_admin: boolean;
}

// 定义仅包含表单字段的类型
interface ILoginFormFields {
    email: string;
    password: string;
}

const schema = yup.object().shape({
    email: yup.string().email().required(),
    password: yup.string().min(8).max(32).required(),
});

const { register, handleSubmit, formState } = useForm<ILoginFormFields>({
    defaultValues: {
        email: '',
        password: '',
    },
    resolver: yupResolver(schema),
});

// 提交时补全is_admin字段
const onSubmit = (formData: ILoginFormFields) => {
    const submitData: IAuthLogin = {
        ...formData,
        is_admin: false, // 根据业务逻辑设置值
    };
    // 执行提交操作
};

方法B：用Omit剔除不需要的字段

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

export interface IAuthLogin {
    email: string;
    password: string;
    is_admin: boolean;
}

const schema = yup.object().shape({
    email: yup.string().email().required(),
    password: yup.string().min(8).max(32).required(),
});

// 用Omit从IAuthLogin中剔除is_admin字段，作为表单类型
const { register, handleSubmit, formState } = useForm<Omit<IAuthLogin, 'is_admin'>>({
    defaultValues: {
        email: '',
        password: '',
    },
    resolver: yupResolver(schema),
});

// 提交时补全is_admin
const onSubmit = (formData: Omit<IAuthLogin, 'is_admin'>) => {
    const submitData: IAuthLogin = {
        ...formData,
        is_admin: true,
    };
    // 执行提交操作
};

核心原则 #

React Hook Form的Resolver会根据Yup Schema自动推断表单字段类型，必须保证useForm的泛型类型与Schema、默认值的字段结构完全一致，才能避免类型不匹配问题。

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