Nuxt3调用GraphQL返回数据后，无法读取null的class属性问题求助

核心原因 #

报错「Cannot read properties of null (reading 'class')」本质是异步数据加载时机不匹配：GraphQL查询是异步执行的，组件首次渲染时accordionBlockBackgroundColour还未返回（值为null或undefined），此时直接访问其.class属性就会触发空值读取错误。另外如果返回的GraphQL数据中该字段本身就是null，也会导致同样问题。

具体解决办法 #

1. 使用可选链操作符兜底（最简便） #

直接在绑定表达式中添加可选链?.，当accordionBlockBackgroundColour为null/undefined时，表达式会返回undefined，不会触发报错，等数据加载完成后自动生效：

<template>
  <div :class="accordionBlockBackgroundColour?.class">...</div>
</template>

2. 条件渲染规避空值 #

通过v-if先判断数据是否存在，再渲染需要绑定类的元素，从根源避免空值访问：

<template>
  <div v-if="accordionBlockBackgroundColour" :class="accordionBlockBackgroundColour.class">
    <!-- 内容 -->
  </div>
  <!-- 可选：数据未加载时的占位 -->
  <div v-else>加载中...</div>
</template>

3. 计算属性统一处理（适合复杂场景） #

通过计算属性封装空值判断和默认值逻辑，让模板更简洁，同时可以自定义兜底类：

<script setup>
import { computed } from 'vue'

// 假设你的GraphQL查询返回的数据存在data中
const { data } = useQuery(/* 你的GraphQL查询 */)

const accordionBgClass = computed(() => {
  return data.value?.accordionBlockBackgroundColour?.class || 'default-bg-class'
})
</script>

<template>
  <div :class="accordionBgClass">...</div>
</template>

4. 数组绑定场景的修正 #

如果是用数组形式绑定类，要确保空值不会被渲染成无效类名，同样结合可选链和默认值：

<template>
  <div :class="['base-class', accordionBlockBackgroundColour?.class || '']">...</div>
</template>

5. GraphQL查询层面设置默认值（可选） #

如果你的GraphQL服务支持，可以在查询时给accordionBlockBackgroundColour字段设置默认值，避免返回null：

query YourQuery {
  # 其他字段...
  accordionBlockBackgroundColour @default(value: { class: "" }) {
    class
  }
}

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