Next.js问题：getStaticProps获数据控制台可见但页面不显示

核心问题分析 #

你的代码中，组件函数未返回map生成的JSX元素，同时存在语法错误，导致数据无法渲染到页面。

具体问题点 #

1. 组件未返回JSX结构：原Post组件中，blogs2.map的代码块直接写在函数内部，没有被包含在return语句中，React无法识别并渲染这部分内容。
2. 语法错误：{blog.slug}后面多了一个多余的反引号`，会导致JSX解析失败。
3. 缺少key属性：React列表渲染要求每个子元素必须有唯一的key属性，否则会触发警告，也可能影响渲染稳定性。

修正后的组件代码 #

const Post = ({ post, blogs }) => {
  const blogs2 = Array.isArray(blogs) ? blogs : [];

  // 将map结果包含在return中，修复语法错误并添加key
  return (
    <>
      {blogs2.map((blog) => (
        <div key={blog.slug}>
          {blog.slug}
        </div>
      ))}
    </>
  );
};

export default Post;

额外检查建议 #

• 确认blogs数组中每个blog对象确实包含slug字段：可以在map内部添加console.log(blog)验证字段是否存在。
• 由于fallback: true，访问未预渲染的路径时，页面会先处于fallback状态，若需要可以添加加载状态提示，避免用户看到空白页面。

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