Vue切换数据源至数据库后出现未处理Promise拒绝类型错误

问题原因 #

• 静态JSON导入是同步加载，组件渲染前数据已完全就绪，模板可直接访问嵌套属性
• 数据库请求属于异步操作，组件首次渲染时portfolios还处于初始状态（通常是空数组或undefined），此时模板尝试访问portfolios[0].portfolioInfo会触发undefined类型错误。而控制台能打印正确值，是因为打印操作在异步请求完成、数据更新后执行。

解决方法 #

1. 初始化匹配结构的默认值 #

在组件data中提前定义与返回数据一致的嵌套结构，避免渲染时访问不存在的属性：

data() {
  return {
    portfolios: [{ portfolioInfo: {} }]
  }
}

2. 使用可选链操作符（推荐） #

在模板中通过ES6可选链?.安全访问嵌套属性，当属性不存在时返回undefined而非抛出错误：

<template>
  <div>{{ portfolios[0]?.portfolioInfo?.portfolioTitle }}</div>
</template>

3. 条件渲染控制 #

通过v-if判断数据是否就绪，确保只有数据存在时才渲染对应内容：

<template>
  <div v-if="portfolios.length && portfolios[0].portfolioInfo">
    {{ portfolios[0].portfolioInfo.portfolioTitle }}
  </div>
</template>

4. 管理异步加载状态 #

在组件中添加加载状态，既可以避免报错，也能提升用户体验：

data() {
  return {
    portfolios: [],
    isLoading: true
  }
},
async created() {
  // 替换为你的数据库请求逻辑
  const response = await fetch('/api/get-portfolios')
  this.portfolios = await response.json()
  this.isLoading = false
}

模板配合加载状态：

<template>
  <div v-if="isLoading">加载中...</div>
  <div v-else>
    {{ portfolios[0]?.portfolioInfo?.portfolioTitle }}
  </div>
</template>

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