Next.js页面getServerSideProps被调用两次，第二次参数异常

核心问题定位 #

你的Next.js页面中getServerSideProps被触发两次，第二次请求时tagId参数被解析为字符串"[object Object]"，这通常是代码中某个地方把JavaScript对象当作URL参数传递，对象被强制转换为字符串后导致的异常。

分步排查方案 #

1. 追踪第二次请求的触发来源 #

• 检查所有路由跳转逻辑：
  • 查看TagInfo、TagList、ArticleLine子组件中，是否有next/link的Link组件，或next/router的router.push/router.replace调用，确认传递tagId时是否误传了完整对象（比如直接传tag而非tag.id）。
  • 排查addChildTag、addChildItem这类方法，是否在执行后触发了路由跳转，且参数传递错误。
• 检查工具函数的副作用：
  • 查看setLatestItems、syncCumulativeValues、checkChildTagProperties这些工具函数，是否内部存在路由跳转逻辑，且错误地传递了对象作为tagId。

2. 增加日志精准定位 #

• 升级getServerSideProps的日志输出，打印完整请求URL和参数类型：

  export async function getServerSideProps(context) {
    const { pTagId, tagId } = context.params;
    // 打印关键信息辅助排查
    console.log('请求完整URL:', context.req.url);
    console.log('tagId类型:', typeof tagId, '值:', tagId);
    console.log('完整参数:', context.params);
  
    if (pTagId && tagId && typeof tagId === 'string' && tagId !== "[object Object]") {
      // 原有业务逻辑
    } else {
      return {};
    }
  }
  

• 在子组件的跳转逻辑处加日志，比如TagInfo中若有跳转代码：

  // 示例：检查跳转时的参数
  const handleTagJump = () => {
    const targetTagId = stateTag.id; // 确保这里取的是ID而非整个对象
    console.log('跳转传递的tagId:', targetTagId);
    router.push(`/tags/${pTagId}/${targetTagId}`);
  };
  

3. 校验路由配置与版本 #

• 确认页面的动态路由结构是否正确：比如页面文件是否为pages/tags/[pTagId]/[tagId].js，避免路由匹配规则导致参数解析异常。
• 若使用较旧的Next.js版本，可能存在路由参数解析bug，尝试升级到稳定版（如v13+的Pages Router或App Router）。

4. 修复参数传递错误 #

• 确保所有传递tagId的场景，都明确使用标量类型（字符串/数字），比如从stateTag中取stateTag.id，而非直接传递stateTag对象。
• 强化getServerSideProps的参数校验，提前拦截异常请求：

  if (pTagId && tagId && typeof tagId === 'string' && !tagId.includes('[object Object]')) {
    // 原有业务逻辑
  } else {
    // 重定向到错误页面或首页
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    };
  }
  

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