Problems with the integration of Vue 3 and Firestore-CodePudding

I'm currently trying to integrate Firebase (and Cloud Firestore) with my app in Vue 3. I've installed [email protected] package. My code and console warnings below.

Does anyone know what I'm doing incorrectly?

firebase.js - file with my config and initialization

import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'

const firebaseApp = initializeApp({
  // Firebase app config
})

const db = getFirestore(firebaseApp)

export default db

BooksService.js

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

const books = collection(db, 'books')

class BooksService {
  getAll () {
    return books
  }
  // other methods
}

export default new BooksService()

HelloWorld.vue - sample component to display books list from Firestore

<template>
  <div>
    <h1>All books</h1>
    <ul>
      <li v-for="book in books" :key="book">
        {{ book }}
      </li>
    </ul>
  </div>
</template>

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

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

  mounted () {
    this.books = BooksService.getAll()
  }
}
</script>

and my warnings and error:

[Vue warn]: Unhandled error during execution of render function 
  at <HelloWorld msg="Welcome to Your Vue.js App" > 
  at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…} > > 
  at <RouterView> 
  at <App>
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <HelloWorld msg="Welcome to Your Vue.js App" > 
  at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…} > > 
  at <RouterView> 
  at <App>
Uncaught (in promise) TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'providers' -> object with constructor 'Object'
    |     property 'Map(8)' -> object with constructor 'Object'
    |     property 'platform-logger =>' -> object with constructor 'Object'
    --- property 'container' closes the circle
    at JSON.stringify (<anonymous>)
    at toDisplayString (shared.esm-bundler.js?9ff4:434)
    at eval (HelloWorld.vue?fdab:7)
    at renderList (runtime-core.esm-bundler.js?5c40:5747)
    at Proxy.render (HelloWorld.vue?fdab:3)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:424)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?5c40:4257)
    at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:6656)
    at flushJobs (runtime-core.esm-bundler.js?5c40:6895)

CodePudding user response：

const books = collection(db, 'books')

class BooksService {
  getAll () {
    return books
  }
}

From here it seems you are returning a CollectionReference instead of array of documents which is being assigned to this.books in your component. Try refactoring to this:

import { collection, getDocs } from "firebase/firestore"
const books = collection(db, 'books')

class BooksService {
  getAll () {
    return getDocs(books).then(qSnap => {
        return qSnap.docs.map(d => ({id: d.id, ...d.data()}))
    })
  }
}