Next.js中useParams()返回null，动态路由参数无法获取求助

你遇到的问题核心是Pages Router和App Router的API混用了：

• 你的目录结构是pages/[gameCode]/index.tsx，属于Pages Router的动态路由写法
• 但你导入的useParams是App Router（app目录专用）的钩子，在Pages Router环境下调用会返回null

正确的解决方案 #

改用Pages Router的useRouter钩子来获取动态路由参数：

修改后的代码 #

'use client'

import { useRouter } from 'next/router';

const GameIndex = () => {
  const router = useRouter();
  // 用可选链避免初始渲染时query为空导致报错
  const gameCode = router.query.gameCode;

  console.log(gameCode);

  return <div>{gameCode ? `当前游戏码：${gameCode}` : '加载中...'}</div>
}

export default GameIndex;

关键说明 #

1. Pages Router的动态路由参数存储在router.query对象中，而不是App Router的useParams()返回值
2. 客户端组件初始渲染时，router.query可能为空（因为路由参数需要客户端路由初始化后才能获取），所以建议用可选链?.或条件判断避免报错
3. 确保你的Next.js版本对应：Pages Router是Next.js 13之前的默认路由系统，13+同时支持两种，但API不通用

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