Next.js动态路由中router.query返回undefined引发无限重渲染

核心问题分析 #

你遇到的问题出在Pages Router的动态路由参数获取时机上：组件初始渲染时router.query还未完成解析，即使加入router.isReady判断，若依赖项或解构时机不对，仍会导致gameCode为undefined，进而触发无效的fetch请求和无限重渲染。

修复方案 #

1. 调整参数解构与判断逻辑

将gameCode的解构移到router.isReady确认之后，同时优化useEffect的依赖项，避免因query未就绪导致的无效触发：

'use client'

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

const GameIndex = () => {
  const [game, setGame] = useState(null);
  const router = useRouter();

  // 在router就绪前直接返回加载态
  if (!router.isReady) {
    return <div>Loading...</div>;
  }

  const { gameCode } = router.query;
  // 若gameCode不存在，直接返回错误提示
  if (!gameCode) {
    return <div>无效的游戏码</div>;
  }

  useEffect(() => {
    fetch(`/api/game/${gameCode}/`)
      .then(response => response.json())
      .then(data => setGame(data))
      .catch(error => console.error('获取游戏数据失败:', error));
  }, [gameCode]); // 此时gameCode已确保存在，直接作为依赖

  return (
    <div>
      {game ? (
        <div>游戏数据: {JSON.stringify(game)}</div>
      ) : (
        <div>正在加载游戏数据...</div>
      )}
    </div>
  );
}

export default GameIndex;

2. 关键优化点说明

• 提前拦截未就绪状态：在组件最开始判断router.isReady，直接返回加载态，避免后续逻辑处理未就绪的query
• 确保参数有效性：在router就绪后解构gameCode，并立即判断是否存在，避免无效请求
• 精简依赖项：此时gameCode已确定是有效值，直接作为useEffect的依赖，确保仅在参数变化时触发请求

3. 排查其他可能原因

• 确认动态路由目录名称[gameCode]拼写完全正确，大小写与代码中的gameCode一致
• 若使用旧版Next.js，建议升级到v13+的稳定Pages Router版本，部分旧版本存在路由参数解析的bug
• 检查_app.tsx中是否有自定义路由逻辑干扰了router状态

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