Vue3+TS异步表单提交处理器的TypeScript类型错误求解

问题核心是你的handleLogin作为异步函数返回了Event，导致返回类型为Promise<Event>，而Vue表单submit事件处理器不接受该类型——它仅支持同步返回void/Event/boolean，或异步返回Promise<void>。

最简解决方案：移除多余的返回语句 #

return event完全没有实际作用，submit事件不需要处理器返回事件对象，直接删除这行代码即可：

<template>
  <form @submit.prevent="handleLogin">
    <!-- 输入框等内容 -->
  </form>
</template>
<script setup lang="ts">
// 无关代码...

const handleLogin = async (event: Event) => {
  try {
    await login({ ...form.value });
    resetForm();
  } catch (error: any) {
    console.error(error.error_description || error.message);
  }
  // 移除 return event
};
</script>

可选：显式指定返回类型 #

如果想更严谨地标注类型，可以给函数添加返回类型声明，让TypeScript明确这是一个返回空Promise的异步函数：

const handleLogin = async (event: Event): Promise<void> => {
  try {
    await login({ ...form.value });
    resetForm();
  } catch (error: any) {
    console.error(error.error_description || error.message);
  }
};

修改后TypeScript类型错误会消失，同时不影响异步登录逻辑的正常执行。

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