我是Vue JS3和Firebase的新手，需要帮助从我的Firebase DB中删除文档。
我已经创建了此组合来删除或编辑特定文档：

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 the document'
        }
    }

    return { error, isPending, deleteDoc }
}

export default useDocument

在组件中，我正在导入此组合以删除文档，如下所示：

<script>
import useDocument from '../composables/useDocument'

export default {
    props:['id'],

    setup(props) {
        
        const { deleteDoc } = useDocument('orgaos', props.id)
        
        const router = useRouter()

        const handleDelete = async () => {
            await deleteDoc()
        }
        
        return { handleDelete }
    }
    
}
</script>

在控制台上，我有以下错误：

Uncaught (in promise) FirebaseError: Function CollectionReference.doc() cannot be called with an empty path.
    at new n (index.esm.js?c6c5:159:1)
    at us (index.esm.js?c6c5:13274:1)
    at n.doc (index.esm.js?c6c5:15719:1)
    at useDocument (useDocument.js?b80b:8:1)
    at setup (Orgaos.vue?051b:107:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:157:1)
    at setupStatefulComponent (runtime-core.esm-bundler.js 5c40:7246:1)
    at setupComponent (runtime-core.esm-bundler.js?5c40:7201:1)
    at mountComponent (runtime-core.esm-bundler.js?5c40:5524:1)
    at processComponent (runtime-core.esm-bundler.js?5c40:5499:1)

页面代码如下：

<template>
    <div>
        <div>
            <NavbarAppHome />
        </div>
        <div>
            <Sidebar />
        </div>
        <div class="missao-list">
            <h2 class="dados_misso">LISTA DE ÓRGÃOS REGISTADOS</h2>
            <div class="table_missao">
                <table>
                <thead>
                    <tr>
                    <th scope="col">Órgãos</th>
                    <th scope="col">Departamento</th>
                    <th scope="col">SIGFE</th>
                    <th scope="col">Estado</th>
                    <th scope="col"></th>
                    </tr>
                </thead>
                <tbody v-if="documents">
                    <tr v-for="m in documents" :key="m.id">
                        <td>{{ m.nome_orgao }}</td>
                        <td>{{ m.departamento_orgao }}</td>
                        <td>{{ m.sigfe_orgao }}</td>
                        <td>{{ m.sigfe_orgao }}</td>
                        <td><button title="Eliminar" class="icon_delete" @click="handleDelete"><i class="fas fa-trash-alt"></i></button><button title="Editar" class="icon_edit"><i class="fas fa-edit"></i></button></td>
                    </tr>
                </tbody>
            </table>
            <div class="error">{{ error2 }}</div>
            </div>
        </div>
    </div>
</template>

但只要我保存页面只是不会甚至显示.有人可以请帮助我处理这个问题？