我希望这是好的，我包括我的完整代码。否则，这将是难以理解我的问题。
我为我的Vue应用程序创建了一个可组合函数，其目的是从数据库中获取文档集合。可组合函数如下所示：

import { ref, watchEffect } from 'vue'
import { projectFirestore } from '../firebase/config'

const getCollection = (collection, query) => {
    const documents = ref(null)
    const error = ref(null)

    let collectionRef = projectFirestore.collection(collection)
    .orderBy('createdAt')

    if (query) {
        collectionRef = collectionRef.where(...query)
    }

const unsub = collectionRef.onSnapshot(snap => {
        let results = []
        snap.docs.forEach(doc => {
            doc.data().createdAt && results.push({ ...doc.data(), id: doc.id })
        })
        documents.value = results
        error.value = null
    }, (err) => {
        console.log(err.message)
        document.value = null
        error.value = 'could not fetch data'
    })

    watchEffect((onInvalidate) =>{
        onInvalidate(() => unsub());
    });

    return {
        documents,
        error
    }
}

export default getCollection

然后我有一个组件，用于存储数据库中的数据

<template>
  <div v-for="playlist in playlists" :key="playlist.id">
    <div class="single">
      <div class="thumbnail">
        <img :src="playlist.coverUrl">
      </div>
      <div class="info">
        <h3>{‌{ playlist.title }}</h3>
        <p>created by {‌{ playlist.userName }}</p>
      </div>
      <div class="song-number">
        <p>{‌{ playlist.songs.length }} songs</p>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
 // receiving props 
  props: ['playlists'],
}
</script>

最后，我在主Home组件中输出数据，其中使用了可组合文件中的文档和错误引用。

<template>
  <div class="home">
    <div v-if="error" class="error">Could not fetch the data</div>
    <div v-if="documents">
      <ListView :playlists="documents" />
    </div>
  </div>
</template>
 
<script>
import ListView from '../components/ListView.vue'
import getCollection from '../composables/getCollection'
 
export default {
  name: 'Home',
  components: { ListView },
  setup() {
    const { error, documents } = getCollection('playlists')
 
    return { error, documents }
  }
}
</script>

这很好。但是现在我希望从第二个集合“books”中添加数据，并且想法是使用相同的组合函数从该集合中获取数据，但是问题是在Home组件中，我不能使用两次引用。我不能写：

<template>
      <div class="home">
        <div v-if="error" class="error">Could not fetch the data</div>
        <div v-if="documents">
          <ListView :playlists="documents" />
          <ListView2 :books="documents" />
        </div>
      </div>
    </template>

    export default {
          name: 'Home',
          components: { ListView, ListView2 },
          setup() {
            const { error, documents } = getCollection('playlists')
            const { error, documents } = getCollection('books')
         
            return { error, documents }
          }
        }

这会给予我一个错误，因为我引用了两次文档和错误。
因此，我尝试将它们嵌套在组件本身中。例如：

<template>
  <div v-for="playlist in playlists" :key="playlist.id">
    <div class="single">
      <div class="thumbnail">
        <img :src="playlist.coverUrl">
      </div>
      <div class="title">
          {{ playlist.title }}
      </div>
      <div class="description">
          {{ playlist.description }}
      </div>
    <div>
      <router-link :to="{ name: 'PlaylistDetails', params: { id: playlist.id }}">Edit</router-link>
    </div>
  </div>
  </div>
</template>
 
<script>
import getCollection from '../composables/getCollection'
export default {
 
  setup() {
      const { documents, error } = getCollection('playlists')
 
      return {
          documents,
          error
      }
  }
}
</script>

这也不起作用。如果我试图查看此组件，我只会得到一个404错误。
那么正确的写法是什么呢？