React项目typescript-eslint/no-misused-promises规则报错求助

错误原因 #

React的onClick这类事件处理器要求返回void类型，但你传递的是一个async函数——所有async函数默认都会返回Promise，哪怕内部没有显式return，这就触发了ESLint规则的校验，因为它禁止在期望返回void的位置使用返回Promise的函数。

可行解决方案 #

方案1：显式返回void/undefined #

在async函数末尾明确返回void 0或者直接写return;，让函数的返回类型符合void要求：

<Button onClick={
  async () => {
    await handleDelete();
    return void 0; // 或者直接写 return;
  }}
>

你之前尝试的return void是语法错误，必须跟表达式（比如void 0）才合法。

方案2：改用Promise链式调用（不使用async/await） #

把异步逻辑用.then()和.catch()处理，同时不返回Promise，让事件处理器是普通的void返回函数：

<Button onClick={() => {
  handleDelete()
    .then(() => {
      // 可选：删除成功后的逻辑
    })
    .catch(err => {
      // 必须处理错误，避免未捕获的Promise rejection
      console.error('删除操作失败:', err);
    });
}}>

方案3：封装通用异步事件处理器 #

写一个工具函数，统一处理异步事件的返回值和错误，避免重复代码：

// 通用工具函数
const wrapAsyncEvent = <E extends React.SyntheticEvent>(
  asyncFn: (event: E) => Promise<void>
) => {
  return (event: E) => {
    // 用void忽略Promise返回值，同时捕获错误
    void asyncFn(event).catch(err => {
      console.error('异步事件执行出错:', err);
    });
  };
};

// 使用示例
<Button onClick={wrapAsyncEvent(async () => {
  await handleDelete();
})}>

为什么之前的尝试没生效 #

• 你用的return void是语法错误，正确写法是return void 0或return;
• 如果只给handleDelete()加了.catch()但依然用async/await包裹，函数还是会返回Promise，不符合void返回的要求

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