Next.js动态页面加载Strapi博客内容时出现Title undefined错误

核心错误点1：props变量名不匹配 #

你在getStaticProps中返回的属性名是posts，但页面组件入参解构的是blog，二者名称完全不对应，导致blog天然为undefined，这是报错的直接原因。
修复方式二选一即可：

// 方案1：修改组件入参
export default function BlogPage({posts}) {
    return (
      <>     
      <div>
        {posts.title}
      </div>
</>
)}

// 方案2：修改getStaticProps返回值
return {
    props: { blog: posts },
};

核心错误点2：字段名大小写不匹配 #

你在Strapi中定义的Blogs集合字段是小写title，但代码中读取的是大写开头的Title，JS语法大小写敏感，即便props匹配成功也会读不到值。

可选适配修复（Strapi v4版本必改） #

如果你用的是Strapi v4版本，默认REST API返回结构是嵌套的data对象，且单条内容直接请求/blogs/[id]比过滤查询效率更高，可直接替换getStaticProps逻辑：

export async function getStaticProps({ params }) {
  const { id } = params;
  // populate=*用于连带查询图片等关联字段，不需要可以去掉
  const res = await fetch(`http://localhost:1337/blogs/${id}?populate=*`);
  const resData = await res.json();
  // Strapi v4取data.attributes，v3版本直接用resData即可
  const blog = resData.data?.attributes || resData;
  return {
    props: { blog },
  };
}

本地验证方法 #

修改代码前可直接在浏览器访问http://localhost:1337/blogs/1，确认接口实际返回的结构和字段名，和代码逻辑对齐即可。修改完成后需要重启Next开发服务，触发静态路径和静态Props重新生成。

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