Next.js使用useRouter获取slug控制台先输出undefined是正常现象吗？

这是Next.js的预期行为，不是代码编写错误。

Next.js在客户端首次渲染（hydration阶段）时，路由实例还未完成参数解析，此时router.query是空对象，所以第一次渲染时读取slug自然是undefined。等路由实例初始化完成后，会触发组件二次渲染，此时query里的动态参数才会被正确注入，所以第二次会输出正确的slug值。

• 方案1：利用router.isReady判断路由是否加载完成
  只有当router.isReady为true时，再执行依赖路由参数的逻辑，代码示例：

import { useRouter } from "next/router";

const exampleFunction = () => {
  const router = useRouter();
  const { slug } = router.query;

  // 路由未准备好时返回加载态即可
  if (!router.isReady) return <div>加载中...</div>;

  // 此时slug一定有有效值
  console.log(slug);
  return <h1>{slug}</h1>;
};

export default exampleFunction;

• 方案2：用useEffect监听slug变化，只在slug有值的时候执行业务逻辑
  如果不需要限制整个组件的渲染时机，仅需要在参数就绪后执行逻辑，可以用该方案：

import { useRouter } from "next/router";
import { useEffect } from "react";

const exampleFunction = () => {
  const router = useRouter();
  const { slug } = router.query;

  useEffect(() => {
    if (!slug) return;
    // 这里写依赖slug的业务逻辑，比如接口请求、状态初始化等
    console.log(slug);
  }, [slug]);

  return <h1>{slug ?? '加载中'}</h1>;
};

export default exampleFunction;

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