Next.js中异步Promise返回函数触发ESLint错误的原因与解决方法

我在Next.js应用中把返回Promise的async函数作为HTML锚点的点击事件处理器，运行时ESLint抛出错误：

"Promise-returning function provided to variable where a void return was expected.(@typescript-eslint/no-misused-promises)"

相关代码 #

获取数据的SWR Hook：

const { data: users, mutate: mutateUsers } = useSWR(
  { url: endpoints.users(), args: { id: userId || "" } },
  ({ args }) => getUsers(args.userId || "")
);

const { data: myData, mutate: mutateData } = useSWR(
  { url: endpoints.data(), args: { id: id || "" } },
  ({ args }) => getData(args.id || "")
);

触发错误的事件处理器：

const updateData: MouseEventHandler<HTMLAnchorElement> = async (e) => {
  e.preventDefault();
  await mutateUsers();        
  await mutateData();    
};

调用代码：

<a className="alert-link" href="#" onClick={updateData}>Update</a>

我尝试了以下写法但无效：

const updateData: MouseEventHandler<HTMLAnchorElement> = (e) => {
  (async => { 
    e.preventDefault();
    await mutateUsers();
    await mutateData();
  })
};

错误原因 #

MouseEventHandler<HTMLAnchorElement>的类型要求函数返回void，但async函数默认返回Promise，两者类型不匹配。ESLint的@typescript-eslint/no-misused-promises规则就是用来检测这种"返回Promise的函数被放到了要求返回void的位置"的问题，避免出现未处理的Promise拒绝。

你之前的尝试无效是因为：

1. 语法错误：(async => { ... })缺少参数括号，正确写法应为(async () => { ... })
2. 没有立即执行内部的async函数，点击事件触发时只会定义一个函数但不会执行任何逻辑
3. 外层函数返回的是一个async函数，依然不符合MouseEventHandler要求的返回void的类型

解决方法 #

方法一：用立即执行async函数+void忽略Promise #

外层用普通函数返回void，内部创建async函数并立即执行，用void明确告诉TS/ESLint我们不关心Promise的返回值：

const updateData: MouseEventHandler<HTMLAnchorElement> = (e) => {
  e.preventDefault();
  void (async () => {
    await mutateUsers();
    await mutateData();
  })();
};

方法二：保留async函数并处理错误 #

如果要直接用async函数，必须处理内部可能的错误（避免未处理的Promise拒绝），同时可以通过ESLint注释忽略该规则：

// eslint-disable-next-line @typescript-eslint/no-misused-promises
const updateData: MouseEventHandler<HTMLAnchorElement> = async (e) => {
  e.preventDefault();
  try {
    await mutateUsers();
    await mutateData();
  } catch (err) {
    // 这里可以添加用户友好的错误提示，比如弹出Toast
    console.error('数据更新失败:', err);
  }
};

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