React表单提交报错：参数‘event’与‘event’类型不兼容

你猜的没错，问题核心就是事件参数类型不匹配——React表单的onSubmit期望接收FormEventHandler<HTMLFormElement>类型的函数，但你定义的handleSubmit用了原生Event类型，导致TypeScript抛出类型不兼容的错误。

下面是两种直接有效的修复方式：

方法一：修改事件参数的类型 #

把handleSubmit的参数类型从Event替换为React.FormEvent<HTMLFormElement>，同时给event.target加上类型断言，让FormData的获取更严谨：

const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const target = event.target as HTMLFormElement;
    const data = new FormData(target);
    const email = data.get('email')!;
    const password = data.get('password')!;

    await mutateAsync({ email, password });
    history.push('/dashboard');
};

方法二：显式指定函数类型为FormEventHandler #

直接给handleSubmit标注FormEventHandler<HTMLFormElement>类型，参数的类型会自动推导，无需手动声明：

import { FormEventHandler } from 'react';

// ...

const handleSubmit: FormEventHandler<HTMLFormElement> = async (event) => {
    event.preventDefault();
    const target = event.target as HTMLFormElement;
    const data = new FormData(target);
    const email = data.get('email')!;
    const password = data.get('password')!;

    await mutateAsync({ email, password });
    history.push('/dashboard');
};

两种方法本质都是让函数类型与React表单onSubmit的要求对齐，任选其一即可。另外补充一句：如果你使用的是React Router v6，useHistory已经被useNavigate替代，但这和当前的类型错误无关。

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