TypeScript构建时onClick函数类型错误求助

问题场景 #

为按钮编写提交处理函数时，构建应用触发类型错误，尝试多种写法均未解决。

报错说明 #

类型不兼容：传递给按钮onClick的函数类型与组件期望的类型不匹配（具体报错为Type '(e: any) => void' is not assignable to type '() => void'或类似的事件类型不兼容提示）

已尝试的代码 #

// 写法1：错误解构参数
const handleSubmit = ({e}: any) => {
  e.preventDefault();
};

// 写法2：任意类型参数
const handleSubmit = (e: any) => {
  e.preventDefault();
};
<Button onClick={(e: any) => handleSubmit(e)} />

// 写法3：直接绑定函数
<Button onClick={handleSubmit} />

解决方案 #

1. 按React规范指定事件类型 #

如果是原生React按钮或标准UI库按钮，onClick的事件参数应为React.MouseEvent<HTMLButtonElement>，明确类型即可解决：

import React from 'react';

const handleSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
  e.preventDefault();
  // 执行你的提交逻辑
};

<Button onClick={handleSubmit} />

2. 区分表单提交与按钮点击逻辑 #

如果是处理表单提交，不要把逻辑绑定在按钮onClick上，应该绑定到<form>的onSubmit事件，此时事件类型为React.FormEvent<HTMLFormElement>：

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  // 表单提交逻辑，比如获取表单数据、调用接口等
};

<form onSubmit={handleSubmit}>
  {/* 表单输入项 */}
  <Button type="submit">提交</Button>
</form>

3. 适配第三方UI库的按钮类型 #

如果使用的是Ant Design、MUI等第三方UI组件库，部分场景下按钮的onClick可能不需要事件参数，此时可以改为无参函数：

const handleSubmit = () => {
  // 执行提交逻辑，若需阻止默认行为，确保在表单层面处理
};

<Button onClick={handleSubmit} />

错误原因分析 #

• 写法1错误解构了参数：onClick传递的是单个事件对象，而非包含e属性的对象
• 使用any绕过类型检查，但未解决真实的类型不匹配问题
• 若混淆了按钮点击与表单提交的事件绑定逻辑，会导致事件对象类型完全不兼容

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