我无法从我的 Vue 应用程序中删除 Firestore 文档

Question

我有两个组件。 一个显示存储在我的 Firestore 数据库中的所有文档，另一个只显示一个文档。

到目前为止，我已经能够删除它们自己的组件内的文档，但我也希望能够从它们全部列出的组件中删除它们。

以下是我使用的不同代码块：

删除 function 存储在一个单独的组合中，如下所示：

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

const useDocument = (collection, id) => {
    const error = ref(null)
    const isPending = ref(false)

    let docRef = projectFirestore.collection(collection).doc(id)

    const deleteDoc = async () => {
        isPending.value = true
        error.value = null
        try {
            const res = await docRef.delete() 
            isPending.value = false
            return res
        }catch(err) {
            console.log(err.message)
            isPending.value = false
            error.value = 'Could not delete document'
        }
    }

    return {
        error,
        isPending,
        deleteDoc
    }

}

export default useDocument

这是单个文档的组件。 这里删除 function WORKS：

   <template>
        <div v-if="playlist" class="playlist-details">
            <div class="playlist-info">
                <div class="cover">
                    <img :src="playlist.coverUrl">
                </div>
                <h2> {{ playlist.title }}</h2>
                <p> {{ playlist.description }} </p>
            </div>
        </div>
        <button @click="handleDelete">Delete</button>
</template>

<script>
import useDocument from '../composables/useDocument'
import getDocument from '../composables/getDocument'
export default {
    props: ['id'],

    setup(props) {
        const { document: playlist } = getDocument('playlists', props.id)
        const { deleteDoc } = useDocument('playlists', props.id)

      const handleDelete = async () => {
          await deleteDoc()
      }

        return {
            playlist,
            handleDelete
        }
    }
}
</script>

但是现在出现了导致麻烦的组件。 这是列出所有文档的组件。

<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>
  <button @click="handleDelete">Delete</button>
  </div>
</template>
 
<script>
import getUser from '../composables/getUser'
import useDocument from '../composables/useDocument'
export default {
 // receiving props 
  props: ['playlists', 'id'],

  setup(props) {
      const { user } = getUser()
      const { deleteDoc } = useDocument('playlists', props.id)

      const handleDelete = async () => {
          await deleteDoc()
      }

      return {
          user,
          handleDelete
      }
  }
}
</script>

我使用相同的 function（handleDelete），但没有任何反应。 我也没有收到任何错误消息。 我只是按下删除按钮，没有任何反应。

有任何想法吗？