@nuxt/content组件fetch方法中使用axios请求数据报错如何解决

Nuxt 提供的 fetch 钩子为异步执行逻辑，不会阻塞组件的初始渲染流程。你在代码中初始化 info 为 null，组件首次渲染时会直接读取 info.description，此时异步请求还未返回，info 仍为 null，因此触发空值读取报错。控制台能正常输出日志是因为请求返回后 fetch 逻辑才执行到打印步骤，和渲染流程的时序不一致。

• 方案1：新增空值判断，最简单的修复方式
  直接在模板中增加判断逻辑，仅当 info 有值时才读取对应属性，或者使用可选链语法简化判断：

  <template>
    <span class="">
      <a :href="`https://github.com/${repo}`">
        <slot>{{ repo }}</slot>
      </a>
      <!-- 写法1：v-if判断 -->
      <div v-if="info">{{ info.description }}</div>
      <!-- 写法2：可选链，更简洁 -->
      <!-- <div>{{ info?.description }}</div> -->
    </span>
  </template>
  

• 方案2：搭配 $fetchState 处理全状态，优化用户体验
  Nuxt 的 fetch 钩子自带状态管理对象 $fetchState，可以直接用来处理加载中、加载失败的场景，同时规避空值问题：

  <template>
    <span class="">
      <a :href="`https://github.com/${repo}`">
        <slot>{{ repo }}</slot>
      </a>
      <div v-if="$fetchState.pending">仓库信息加载中...</div>
      <div v-else-if="$fetchState.error">仓库信息加载失败</div>
      <div v-else>{{ info.description }}</div>
    </span>
  </template>
  

• 方案3：预取数据生成纯静态内容（适配SSG场景）
  如果你用的是全静态站点生成模式，不想客户端运行时发起请求，可以在 nuxt.config.js 中配置 @nuxt/content 的解析钩子，在构建阶段就提前请求 GitHub API 获取数据，直接注入到组件属性中，构建后的静态页面自带渲染所需的所有数据，还能避免客户端触发 GitHub API 限流。

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