如何修复Next.js中getStaticPaths参数缺失及res.json()错误？

1. 错误：Error: A required parameter (post.Id) was not provided as a string in getStaticPaths for /posts/[post.Id] #

• 问题核心：页面文件名是[post.Id]，但代码里getStaticPaths和getStaticProps中用的参数名是postId，Next.js要求动态路由的参数名必须和文件名中的变量完全一致（包括点号和大小写）。
• 修复步骤：
  • 在getStaticPaths中，将params: { postId: ${post.id} }改为params: { "post.Id": ${post.id} }（参数名带点号，需用引号包裹）；
  • 在getStaticProps中，把params.postId替换成params["post.Id"]，同步更新fetch请求的URL路径。

2. 错误：res.json() is not a function #

• 问题核心：当fetch请求返回非成功状态（比如404、500）时，response对象无法正常解析JSON，直接调用response.json()会抛出错误。
• 修复步骤：调用response.json()前，先通过response.ok判断请求是否成功（状态码在200-299区间），请求失败则直接返回notFound: true。

修正后的完整代码 #

import { useRouter } from "next/router";

function Post({ post }) {
  const router = useRouter();

  if (router.isFallback) {
    return <div>getting Data...</div>;
  }

  return (
    <>
      <h2>
        {post.id} {post.title}
      </h2>
      <p>{post.body}</p>
    </>
  );
}

export default Post;

export async function getStaticProps(context) {
  const { params } = context;
  const postId = params["post.Id"];
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${postId}`
  );

  // 先校验请求是否成功
  if (!response.ok) {
    return {
      notFound: true,
    };
  }

  const data = await response.json();

  if (!data.id) {
    return {
      notFound: true,
    };
  }

  console.log(`Generating page for /posts/${postId}`);
  return {
    props: {
      post: data,
    },
  };
}

export async function getStaticPaths() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const data = await response.json();
  const paths = data.map((post) => {
    return {
      params: { "post.Id": `${post.id}` }, // 参数名与文件名完全匹配
    };
  });

  return {
    paths,
    fallback: true,
  };
}

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