Vue3通过onMounted钩子结合路由参数拉取API数据出现空属性读取错误

1. 组件初始渲染优先级高于onMounted内的异步请求：你给folder的初始值是null，但模板在接口请求返回前就会执行第一次渲染，直接访问folder.title等价于读取null.title，直接触发空指针报错。
2. 错误捕获逻辑不生效：onErrorCaptured只能捕获子孙组件抛出的错误，当前组件自身渲染阶段抛出的错误无法被它捕获，因此错误直接暴露到控制台。
3. 模板内逻辑判断存在语法和逻辑错误：
   • 用=== []判断数组为空：数组是引用类型，该判断永远返回false，永远无法命中空数据分支
   • 逻辑或写为单竖线|：这是位运算符，不是你需要的||逻辑或运算符
4. 列表页逻辑不报错是因为你初始化的是空数组ref([])，遍历空数组不会抛出语法错误，最多无内容渲染，和当前单对象初始为null的场景有本质区别。

• 方案1：模板层加空值判断
  要么在渲染内容的外层加v-if="folder"控制，数据加载完成前可以显示加载态：

  <template>
    <div>
      <div v-if="errorMessage">{{ errorMessage }}</div>
      <div v-if="!folder">加载中...</div>
      <div v-else>
        <NavBar :pageTitle="folder.title" />
        <!-- 其余原有内容 -->
      </div>
    </div>
  </template>
  

  也可以直接用可选链语法兼容空值：

  <NavBar :pageTitle="folder?.title ?? '默认标题'" />
  

• 方案2：修正模板内的数组判断逻辑
  把数组空判断替换为长度判断，修正逻辑或运算符：

  <!-- 原有判断替换为 -->
  <div v-if="folder?.documents?.length > 0" class="grid grid-cols-3 gap-4 py-6">
    <!-- 遍历逻辑 -->
  </div>
  <div v-else>
    <p>Non ci sono documenti, creane uno.</p>
  </div>
  

• 方案3：给异步请求加错误捕获，避免接口失败时folder一直为null

  onMounted(async () => {
    try {
      folder.value = await folderService.get(folderId);
    } catch (e) {
      errorMessage.value = (e as Error).message;
    }
  })
  

• 可选方案：给folder设置符合类型的初始值，避免空指针

  const folder= ref<FolderModel>({
    title: '',
    documents: []
    // 其余FolderModel需要的字段都给初始空值
  });
  

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