Next.js博客页面刷新时API请求ID为undefined的问题解决

针对 Pages Router（Next.js 12 及更早） #

方案1：用服务端渲染直接获取参数并请求数据 #

在详情页组件文件（比如pages/blog/[id].js）中，通过getServerSideProps从服务器上下文直接拿到ID，提前请求数据并传给组件，彻底避开客户端路由未就绪的问题：

export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`http://你的API地址/blogs/${id}`);
  const blog = await res.json();

  return {
    props: { blog }
  };
}

function ViewDetail({ blog }) {
  return (
    <div>
      <h1>{blog.title}</h1>
      <div>{blog.content}</div>
    </div>
  );
}

export default ViewDetail;

方案2：客户端请求时等待路由就绪 #

如果必须在客户端发起请求，要等路由参数解析完成后再执行，通过router.isReady状态判断：

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

function ViewDetail() {
  const router = useRouter();
  const [blog, setBlog] = useState(null);

  useEffect(() => {
    if (!router.isReady) return;

    const fetchBlog = async () => {
      const res = await fetch(`/api/blogs/${router.query.id}`);
      const data = await res.json();
      setBlog(data);
    };

    fetchBlog();
  }, [router.isReady, router.query.id]);

  if (!blog) return <div>加载中...</div>;

  return (
    <div>
      <h1>{blog.title}</h1>
      <div>{blog.content}</div>
    </div>
  );
}

export default ViewDetail;

检查API路由的参数获取方式 #

如果是自定义API路由（比如pages/api/blogs/[id].js），要通过req.query.id获取参数，而非req.params.id：

// pages/api/blogs/[id].js
export default function handler(req, res) {
  const { id } = req.query;
  res.status(200).json({ id, title: '测试博客', content: '博客内容示例' });
}

针对 App Router（Next.js 13+） #

App Router模式下，页面组件可直接接收params参数，刷新时参数不会丢失：

// app/blog/[id]/page.js
async function ViewDetail({ params }) {
  const { id } = params;
  const res = await fetch(`http://你的API地址/blogs/${id}`, { cache: 'no-store' });
  const blog = await res.json();

  return (
    <div>
      <h1>{blog.title}</h1>
      <div>{blog.content}</div>
    </div>
  );
}

export default ViewDetail;

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