WP API与Nuxt.js开发报错：无法读取'wp:featuredmedia'及属性'0'未定义

看起来你遇到的两个错误都是因为部分文章没有设置特色图片，或者在访问嵌套属性时没做空值判断导致的。咱们一步步来搞定：

错误根源分析 #

1. Cannot read property 'wp:featuredmedia' of undefined：说明有些文章的_embedded字段不存在，或者_embedded['wp:featuredmedia']未定义
2. Cannot read property '0' of undefined：直接访问wp:featuredmedia[0]时，这个数组本身就是undefined，自然拿不到索引0的元素

虽然你加了_embed参数，但WordPress API对于没有设置特色图片的文章，不会返回wp:featuredmedia这个嵌套数组，所以必须做容错处理。

解决方案 #

1. 在数据获取阶段添加容错处理

不管你是用asyncData还是fetch获取数据，都要对每篇文章的特色图片进行判断，避免直接访问未定义的属性。这里推荐两种写法：

写法一：传统层层判断（兼容性好）

async asyncData({ $axios }) {
  const res = await $axios.get('https://www.agencedebord.com/wp-json/wp/v2/posts?categories=46&per_page=61&_embed');
  
  const posts = res.data.map(post => {
    // 可设置默认图片，也可以设为null
    let featuredImage = '/path/to/default-image.jpg';
    
    // 层层校验每个属性是否存在
    if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'].length > 0) {
      featuredImage = post._embedded['wp:featuredmedia'][0].source_url;
    }
    
    return {
      ...post,
      featuredImage // 把处理后的图片地址挂载到post对象，方便模板调用
    };
  });
  
  return { posts };
}

写法二：使用可选链操作符（更简洁）

如果你的Nuxt.js版本较新（支持ES2020+语法，Babel会自动转译），可以用?.简化判断：

async asyncData({ $axios }) {
  const res = await $axios.get('https://www.agencedebord.com/wp-json/wp/v2/posts?categories=46&per_page=61&_embed');
  
  const posts = res.data.map(post => ({
    ...post,
    featuredImage: post._embedded?.['wp:featuredmedia']?.[0]?.source_url || '/path/to/default-image.jpg'
  }));
  
  return { posts };
}

2. 在模板中条件渲染图片

拿到处理后的数据，在模板里只当图片地址存在时才渲染图片标签：

<template>
  <div class="post-list">
    <div v-for="post in posts" :key="post.id" class="post-item">
      <h2 v-html="post.title.rendered"></h2>
      <!-- 只有featuredImage存在时才显示图片 -->
      <img 
        v-if="post.featuredImage" 
        :src="post.featuredImage" 
        :alt="post.title.rendered"
        class="post-featured-image"
      />
    </div>
  </div>
</template>

额外检查点 #

• 可以直接在浏览器访问你的API接口，看看是不是有部分文章确实没有_embedded['wp:featuredmedia']字段（这是正常的，因为没设置特色图片）
• 如果是服务端渲染时出错，确保你的asyncData/fetch方法正确等待了API请求完成，Nuxt.js会在服务端等待异步操作完成后再渲染页面

内容的提问来源于stack exchange，提问作者Aurélien