使用useEffect时触发TypeError: e.close is not a function错误求助

错误原因 #

这个报错是因为当前环境中setTimeout返回的不是标准的定时器对象，导致clearTimeout无法调用其内部的close方法完成清理。常见于SSR/SSG框架（如Next.js App Router）或自定义定时器实现的场景，同时代码中两个独立的useEffect可能引发路由跳转和定时器清理的时序冲突。

解决方案 #

方案1：适配环境的定时器类型声明（TypeScript场景） #

将NodeJS.Timeout替换为ReturnType<typeof setTimeout>，让TypeScript自动适配当前环境的定时器返回类型，避免类型不匹配导致的异常：

useEffect(() => {
  const changeRouteTimeout = setTimeout(() => {
    sessionStorage.removeItem("redirectedFlag");
    redirect("/trainees");
  }, 7500);

  return () => {
    clearTimeout(changeRouteTimeout);
  };
}, []);

方案2：合并逻辑避免不必要的定时器创建 #

两个独立的useEffect会导致：当第一个useEffect触发路由跳转时，第二个useEffect创建的定时器还未执行就随组件卸载，此时clearTimeout清理已失效的定时器引发错误。合并逻辑后，仅在需要时创建定时器：

useEffect(() => {
  const redirectedFromRegister = sessionStorage.getItem("redirectedFlag") === "yes";
  if (!redirectedFromRegister) {
    redirect("/");
    return; // 直接返回，不创建定时器
  }

  const changeRouteTimeout = setTimeout(() => {
    sessionStorage.removeItem("redirectedFlag");
    redirect("/trainees");
  }, 7500);

  return () => {
    clearTimeout(changeRouteTimeout);
  };
}, []);

方案3：调整路由跳转方式（Next.js App Router场景） #

如果是在Next.js App Router中使用redirect函数，其同步跳转的特性可能导致定时器清理异常。改用useRouter的push方法异步跳转：

import { useRouter } from 'next/navigation';

// 组件内
const router = useRouter();

useEffect(() => {
  const redirectedFromRegister = sessionStorage.getItem("redirectedFlag") === "yes";
  if (!redirectedFromRegister) {
    router.push("/");
    return;
  }

  const changeRouteTimeout = setTimeout(() => {
    sessionStorage.removeItem("redirectedFlag");
    router.push("/trainees");
  }, 7500);

  return () => {
    clearTimeout(changeRouteTimeout);
  };
}, [router]);

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