React中'Uncaught TypeError: destroy is not a function'错误求助

错误根源 #

useEffect钩子对返回值有明确要求：要么返回一个清理函数（function类型），要么不返回任何值（默认返回undefined）。你在useEffect里满足条件时返回了null，React会尝试将这个null作为清理函数执行，直接触发Uncaught TypeError: destroy is not a function错误，导致页面渲染失败出现空白。

修复代码 #

直接移除return null即可，因为此处不需要任何清理逻辑：

useEffect(() => {
  if (auth && user && user.emailVerified && user.dstoreName) {
    navigate(`/app/overview`);
    // 删除多余的return null
  }
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [auth, user]);

额外优化点 #

• 完善依赖数组：当前禁用了exhaustive-deps检查，建议把navigate加入依赖列表，避免闭包问题：

useEffect(() => {
  if (auth && user && user.emailVerified && user.dstoreName) {
    navigate(`/app/overview`);
  }
}, [auth, user, navigate]); // 添加navigate到依赖

• 优化跳转行为：使用replace选项替换当前路由记录，防止用户点击返回按钮回到认证页面：

navigate(`/app/overview`, { replace: true });

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