如何解决Next.js+TypeScript+Strapi项目中posts.map is not a function报错？

TypeError: posts.map is not a function 本质是运行时接收到的posts实际值不是数组类型，TypeScript的类型定义仅做编译时校验，不会影响运行时的实际数据结构，从Strapi接口拿到的数据不符合预期是该问题的高发原因。

• 第一步：核对Strapi接口返回结构 #

  Strapi v4 所有接口返回默认会用data和meta字段包裹，不会直接返回内容数组：

  // 请求 /api/posts 时的实际返回格式
  {
    "data": [/* 这里才是你的文章数组 */],
    "meta": {"pagination": {...}}
  }
  

  如果你直接把接口返回的整体对象赋值给posts，就会导致posts是对象而非数组，正确的取值写法为：

  // 以getStaticProps为例
  export async function getStaticProps() {
    const res = await fetch(`${process.env.STRAPI_URL}/api/posts?populate=*`)
    const result = await res.json()
    // 取data字段作为posts，不要直接用result
    return { props: { posts: result.data ?? [] } }
  }
  

• 第二步：增加运行时兼容校验 #

  不要完全依赖TypeScript类型做运行时保证，增加兜底逻辑避免页面崩溃：
  1. 给组件参数加默认值：

  const BlogPage = ({ posts = [] }: BlogPageProps) => {}
  

  2. 渲染前先做类型判断：

  {Array.isArray(posts) ? posts.map((post) => (
    <PostCard effect="fade-up" key={post.id} post={post} />
  )) : <p>暂无博客内容</p>}
  

• 第三步：检查服务端属性传递逻辑 #

  核对getServerSideProps/getStaticProps的返回值：
  • 确认返回的props中key为posts，没有拼写错误
  • 增加接口请求错误处理，避免接口报错时把错误对象赋值给posts：

  export async function getStaticProps() {
    try {
      const res = await fetch(`${process.env.STRAPI_URL}/api/posts?populate=*`)
      if (!res.ok) throw new Error('接口请求失败')
      const result = await res.json()
      return { props: { posts: result.data ?? [] } }
    } catch (e) {
      // 异常时返回空数组
      return { props: { posts: [] } }
    }
  }
  

• 第四步：优化TypeScript类型定义 #

  把posts定义为可选类型，匹配可能为空的场景：

  type BlogPageProps = {
    posts?: PostData[];
  };
  

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