Next.js中console.log四次输出异常，期望获1731547675却得[slug]求助

核心问题 #

• 路由参数获取方式错误：你通过asPath分割字符串提取参数，但asPath在Next.js不同渲染阶段（服务器端渲染、客户端hydration）值会不同——初始渲染时可能还保留动态路由的占位符[slug]，只有客户端路由完全完成后才会显示实际参数值，这就是日志里同时出现[slug]和目标值的原因。
• 变量未声明：slu没有用let/const声明，会成为全局变量，可能引发意外的变量污染问题。
• 多次日志输出：开发环境下React Strict Mode会触发组件双重渲染，再加上服务器端和客户端各一次执行，就会出现四次console.log，这是开发环境的正常特性，生产环境会自动消失。

修复代码 #

直接使用Next.js官方推荐的router.query获取动态路由参数，无需手动处理路径：

import { useRouter } from 'next/router';

export default function Course() {
  const router = useRouter();
  // 直接从query中获取slug参数
  const slu = router.query.slug;

  // 可选：确保参数存在时再输出，避免空值日志
  if (slu) {
    console.log(slu);
  }

  return (<div>页面内容</div>);
}

额外说明 #

• 如果你的路由结构是pages/course/[slug].js，router.query.slug会准确对应路径中的参数值，无需依赖路径分割，能适配路径结构的变动。
• 开发环境的四次渲染是Strict Mode用于检测副作用的机制，生产环境打包后只会执行一次组件逻辑。

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