React Hook Form onSubmit遇TypeScript错误：返回Promise与预期void冲突

问题原因 #

ESLint检测到handleSubmit(onSubmit)返回了Promise，但<form>的onSubmit属性要求接收返回值为void的函数。即便已经将onSubmit定义为SubmitHandler<FormInput>类型，React Hook Form的handleSubmit仍可能被TypeScript推断为返回Promise，触发@typescript-eslint/no-misused-promises规则报错。

解决方案 #

• 方案1：显式断言返回类型
  在onSubmit属性中，将handleSubmit的返回值断言为返回void的函数，明确告知TypeScript类型：

  <form
    onSubmit={handleSubmit(onSubmit) as (e: React.FormEvent) => void}
    className="flex justify-center items-center gap-3"
  >
  

• 方案2：单行禁用ESLint规则
  若确认代码逻辑无问题，可直接在onSubmit属性行添加禁用注释：

  <form
    // eslint-disable-next-line @typescript-eslint/no-misused-promises
    onSubmit={handleSubmit(onSubmit)}
    className="flex justify-center items-center gap-3"
  >
  

• 方案3：明确onSubmit函数的返回值
  给onSubmit函数显式添加void返回类型注解，消除类型推断的歧义：

  const onSubmit: SubmitHandler<FormInput> = (data, event): void => {
    event?.preventDefault();
    const { searchQuery } = data;
    dispatch(setSearchQuery(searchQuery));
  };
  

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