Next.js 13.0.7 Pages路由生产环境router.push报错求助

核心原因分析 #

你遇到的TypeError: Cannot read properties of undefined (reading 'push')，本质是调用router.push时router对象为undefined。结合Next.js 13 Pages版本特性，主要有以下两种可能：

1. 组件在服务器端渲染时调用了useRouter #

useRouter是客户端专属钩子，仅在浏览器环境中有效。如果你的Item组件被用于服务器端渲染（SSR）或静态生成（SSG）页面中，服务器端执行useRouter会直接返回undefined，后续点击触发changePage时自然会报错。

2. 未定义的detail变量引发连锁问题 #

代码中使用了detail变量，但未看到任何声明或赋值逻辑。虽然当前错误指向push，但detail为undefined会导致detail.service_owner?.id等表达式异常，可能间接影响router.push的执行（比如条件判断抛出错误，导致代码逻辑偏离预期）。

具体修复步骤 #

• 强制组件在客户端渲染：
  在Item组件的顶部添加'use client'指令（Next.js 13 Pages版本支持该语法），确保组件仅在浏览器环境中运行：

  'use client'; // 新增这一行
  import React from 'react';
  import {useSelector} from "react-redux";
  import {ALL_VENDORS, PANEL, PUBLIC_PANEL, SIGNAL, VENDORS} from "/navigation/CONSTANS";
  import {useRouter} from "next/router";
  

  或者通过动态导入关闭SSR：

  // 在使用Item组件的地方替换为动态导入
  import dynamic from 'next/dynamic';
  const Item = dynamic(() => import('./Item'), { ssr: false });
  

• 补全detail变量的定义：
  检查detail的来源，比如是否是组件的props、Redux状态或其他地方的变量，添加对应的获取逻辑，例如：

  // 示例：如果detail是组件props
  const Item = ({ detail }) => {
      // 原有代码...
  };
  

• 增加安全兜底判断：
  在changePage中额外判断router是否存在，避免极端情况报错：

  const changePage = () => {
      if (!router || !router.isReady) return;
      // 原有逻辑...
  };
  

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