Next.js中TypeError: posts.map不是函数问题求助

核心原因 #

1. 实际传入组件的posts不是数组，而是对象：你打印typeof posts得到object，说明可能把包含数组的外层对象（比如{ posts: [...] }）直接传给了PostsGrid，而非数组本身；或是模拟数据结构写错，不是纯数组。
2. TypeScript类型定义不匹配：要么PostsGrid组件的Props类型写错（比如把Props直接定义成PostThumbnailProps[]，而非包含posts属性的对象），要么传递的参数类型和组件期望的不匹配。

解决步骤 #

1. 排查传入组件的posts值 #

在调用PostsGrid的地方，打印传入的参数：

// 首页或帖子页组件内
console.log('传入PostsGrid的posts:', posts);

如果输出是类似{ posts: [{}, {}] }的对象，说明传参错误，应该传递对象里的posts属性：

// 错误写法
<PostsGrid posts={mockData} />
// 正确写法
<PostsGrid posts={mockData.posts} />

2. 修正组件的Props类型定义 #

确保PostsGrid的Props是包含posts属性的对象类型，而非直接是数组：

// 正确的Props定义
interface PostsGridProps {
  posts: PostThumbnailProps[];
}

export default function PostsGrid({ posts }: PostsGridProps) {
  return (
    <div className="grid">
      {posts.map(post => (
        <PostThumbnail key={post.id} {...post} />
      ))}
    </div>
  );
}

如果之前把Props写成PostThumbnailProps[]，组件会期望直接接收数组作为参数（比如<PostsGrid {...mockPosts} />），但你却传了带posts属性的对象，就会触发TS类型错误。

3. 确保模拟数据是纯数组 #

检查模拟数据结构，必须是PostThumbnailProps[]类型的数组：

// 正确的模拟数据
const mockPosts: PostThumbnailProps[] = [
  { id: '1', title: '精选帖子1', excerpt: '帖子摘要内容' },
  { id: '2', title: '精选帖子2', excerpt: '另一篇帖子摘要' },
];

不要写成外层包裹对象的形式（比如{ data: mockPosts }），除非你明确需要这种结构，且传递时取出对应数组。

4. 增加防御性判断 #

JS中数组的typeof结果是object，属于正常现象。可以在组件里加一层数组校验，避免报错：

export default function PostsGrid({ posts }: PostsGridProps) {
  if (!Array.isArray(posts)) {
    return <div>暂无帖子</div>;
  }

  return (
    <div className="grid">
      {posts.map(post => (
        <PostThumbnail key={post.id} {...post} />
      ))}
    </div>
  );
}

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