Next.js调用Contentful CMS API时出现fields未定义错误

问题分析 #

你遇到的矛盾情况（控制台能看到fields但访问图片时报错），核心原因集中在两点：

• 部分返回条目（比如cards数组里的部分项）可能不存在fields字段（比如未发布的草稿、残留的无效条目），而单个article是有效条目，所以title能正常获取。
• Contentful的图片属于Asset嵌套引用结构，直接访问fields.image.fields时，若image本身未正确解析或不存在，就会触发报错；且你未做空值容错处理，放大了这个问题。

解决方案 #

1. 数据获取阶段过滤无效条目 #

修改getStaticProps，过滤掉没有fields的无效条目，避免前端处理脏数据：

export const getStaticProps = async ({ params }) => {
  const { items } = await client.getEntries({
    content_type: 'articles',
    'fields.slug': params.slug
  })

  if (!items.length) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }

  const res = await client.getEntries({ content_type: "articles" })
  // 过滤掉无fields的无效条目
  const validCards = res.items.filter(item => item.fields)

  return {
    props: { article: items[0], cards: validCards },
    revalidate: 1
  }
}

2. 前端访问时用可选链做容错 #

访问图片等嵌套字段时，用可选链操作符?.避免因层级缺失报错，同时添加兜底判断：

// 示例：渲染图片的React代码
{article?.fields?.image?.fields?.file?.url && (
  <img 
    src={`https:${article.fields.image.fields.file.url}`} 
    alt={article.fields.image.fields.description || article.fields.title}
  />
)}

3. 确保Contentful条目已发布 #

检查Contentful后台的articles条目，确保所有需要展示的内容都已发布——未发布的草稿会返回不完整的字段结构，容易引发报错。

4. 解析嵌套引用字段 #

如果图片是通过引用字段关联的，在调用getEntries时添加include参数，确保嵌套引用被正确解析（默认解析深度为1，可根据结构调整）：

// 修改getEntries请求，提升引用解析深度
const res = await client.getEntries({
  content_type: "articles",
  include: 2 // 最大支持10级，根据你的嵌套结构调整
})

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