TypeScript报错：预期返回void却传入Promise返回函数的解决求助

问题描述 #

React+Next.js项目中，表单提交逻辑可正常发送注册邮件，但TypeScript触发类型报错：

const handleSignIn: (e: React.SyntheticEvent) => Promise<void> Promise-returning function provided to attribute where a void return was expected.

报错对应代码：<form onSubmit={handleSignIn}>，尝试过修改但导致功能失效，原代码如下：

import React, { useState } from "react";
import { signIn } from "next-auth/react";

function RegisterPage() {
  const [email, setEmail] = useState("");

  const handleSignIn = async (e: React.SyntheticEvent): Promise<void> => {
    e.preventDefault();
    try {
      await signIn("email", {
        email,
        redirect: false,
        callbackUrl: "/",
      });
    } catch (error) {
      console.log(error);
    }
  };

  const registerForm = () => (
    <form onSubmit={handleSignIn}>
      <input
        type="email"
        className="form-control"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Your email"
        autoFocus
      />
      <br />
      <button type="submit" className="btn btn-raised">
        Sign In
      </button>
    </form>
  );
  return (
    <div className="container p-5">
      <div className="row">
        <div className="col-md-6 offset-md-3">
          <h4>Register</h4>
          {registerForm()}
        </div>
      </div>
    </div>
  );
}

export default RegisterPage;

解决方案 #

核心问题是React表单的onSubmit事件处理器要求返回void，但异步函数默认返回Promise，导致类型不匹配。将异步逻辑封装在事件处理器内部的独立函数中，即可解决类型报错且保留功能：

修改后的完整代码 #

import React, { useState } from "react";
import { signIn } from "next-auth/react";

function RegisterPage() {
  const [email, setEmail] = useState("");

  const handleSignIn = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // 封装异步逻辑到独立函数中
    const submitAuth = async () => {
      try {
        await signIn("email", {
          email,
          redirect: false,
          callbackUrl: "/",
        });
      } catch (error) {
        console.log(error);
      }
    };
    // 立即执行异步函数
    submitAuth();
  };

  const registerForm = () => (
    <form onSubmit={handleSignIn}>
      <input
        type="email"
        className="form-control"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Your email"
        autoFocus
      />
      <br />
      <button type="submit" className="btn btn-raised">
        Sign In
      </button>
    </form>
  );
  return (
    <div className="container p-5">
      <div className="row">
        <div className="col-md-6 offset-md-3">
          <h4>Register</h4>
          {registerForm()}
        </div>
      </div>
    </div>
  );
}

export default RegisterPage;

关键修改点 #

• 将handleSignIn的类型改为(e: React.FormEvent<HTMLFormElement>) => void，明确事件为表单元素的提交事件，类型更精准。
• 把原有的异步登录逻辑封装到内部函数submitAuth中，事件处理器本身返回void，符合TypeScript对表单事件处理器的类型要求。
• 保留e.preventDefault()阻止默认表单提交行为，确保自定义逻辑正常执行。

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