关闭React应用时发起API调用的实现及TypeScript useEffect报错解决方案

报错根因 #

React 对 useEffect 的清理函数有明确的类型约束：清理函数本身必须同步执行，返回值只能是 void，不允许返回任何 Promise 类的异步对象。
你当前的代码里，saveProfileVisits 本身是 async 异步函数，直接把它的调用结果作为清理函数的返回值，相当于让清理函数返回了一个 Promise，自然不符合 EffectCallback 的类型要求。

修复方案 #

修改清理函数的写法，不要把异步调用的Promise作为返回值传递给React，可以用 void 操作符刻意忽略异步调用的返回值：

useEffect(() => {
  initializeUser()
  return () => {
    // 直接触发异步上报，不把返回的Promise交给React
    void saveProfileVisits()
  }
}, [saveProfileVisits]);

⚠️ 注意不要把清理函数本身写成 async 函数（比如 return async () => { await saveProfileVisits() }），这会让清理函数直接返回Promise，反而加重类型报错，也违背React对清理函数的执行要求。 #

把退出上报逻辑放在根组件的useEffect清理函数里，完全不是用户退出应用时触发API的最优方案，存在两个核心硬伤：

• 触发时机不可靠：useEffect的清理函数只有在React正常调度组件卸载流程时才会执行，当用户直接关闭标签页、强制刷新页面、移动端切后台被系统回收时，浏览器会直接终止整个页面的JS执行进程，根本等不到React跑完清理函数，之前攒的访问记录会直接丢失。就算清理函数侥幸被执行到，里面发起的普通异步请求（fetch/axios）也很容易被浏览器在页面卸载时直接中断，根本到不了服务器。
• 容易误触发：如果saveProfileVisits的引用因为组件重渲染、HMR热更新频繁变化，会导致effect反复执行清理逻辑，在用户还没真正退出的时候就提前把未收集完成的访问记录发给服务器，造成数据不准确。

针对「用户离开页面时批量上报本地缓存的访问记录」这个需求，优先用浏览器原生的页面生命周期能力实现，比绑定React生命周期可靠得多：

• 替换触发时机：在App组件挂载时，绑定浏览器原生的 pagehide 事件（兼容移动端iOS Safari，比beforeunload触发更稳定），作为用户离开页面的检测入口，代替原来的useEffect清理逻辑。
• 替换发送方式：页面卸载场景下不要用普通的axios/fetch请求，改用浏览器专门提供的 navigator.sendBeacon 接口发送数据。这个接口会把请求交给浏览器后台进程完成，不会因为页面卸载被中断，也不会阻塞页面的正常关闭流程。
• 增加兜底逻辑：应用启动初始化时，先检查sessionStorage中是否存在未成功上报的历史访问记录，如果有就先调用接口完成上报，再清理缓存。哪怕之前因为异常退出导致上报失败，下次用户进入应用时也能把之前攒的数据补传上去。

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