Vue3集成Firebase 9 Cloud Firestore出现循环结构转换错误如何解决

DevOps 小满

2026-10-3

错误根因

你的报错核心是没有正确调用Firebase 9的查询API获取实际数据：

collection(db, 'books')返回的是集合引用对象，并不是books集合内存储的真实数据，这个对象内部存在循环引用结构，你直接把它赋值给books变量并放到模板渲染时，Vue尝试将对象转为可显示的字符串就触发了循环结构序列化报错，提示的Vue内部bug是误报，和Vue本身无关。

修复步骤

1. 修改BooksService.js，补充数据拉取逻辑

Firebase 9模块化SDK需要用getDocs方法拉取集合内的所有文档数据，调整代码如下：

import db from '../firebase'
import { collection, getDocs } from 'firebase/firestore'

const booksRef = collection(db, 'books') // 重命名明确变量属性为引用，而非实际数据

class BooksService {
  // 改为异步方法，返回整理后的文档数据数组
  async getAll () {
    const snapshot = await getDocs(booksRef)
    // 遍历查询快照，拼接文档id和文档内容返回
    return snapshot.docs.map(doc => ({
      id: doc.id,
      ...doc.data()
    }))
  }
  // 其他方法保持不变
}

export default new BooksService()

2. 修改HelloWorld.vue，异步获取数据后再赋值

你需要在mounted钩子中等待异步查询返回后，再把真实数据赋值给本地变量，同时调整v-for的key取值为文档id：

<template>
  <div>
    <h1>All books</h1>
    <ul>
      <!-- 用唯一的文档id作为key，不要直接用book对象当key -->
      <li v-for="book in books" :key="book.id">
        <!-- 这里可替换为具体字段，比如book.title、book.author等 -->
        {{ book }}
      </li>
    </ul>
  </div>
</template>

<script>
import BooksService from '../services/BooksService'

export default {
  data: () => ({
    books: []
  }),

  async mounted () {
    // 等待异步查询返回后再赋值
    this.books = await BooksService.getAll()
  }
}
</script>