Vue3 Composition API结合Firebase删除文档失败，页面无法加载求助

错误原因 #

控制台报错明确说明，调用CollectionReference.doc()时传入了空路径——也就是你初始化useDocument时传入的props.id为空值，导致Firebase无法定位到具体文档，抛出错误后阻断了页面渲染。

修复步骤 #

1. 优化组合式函数，增加参数校验 #

修改useDocument.js，延迟创建文档引用到删除方法内部，同时增加ID有效性校验，避免初始化阶段就触发错误：

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

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

    const deleteDoc = async (id) => {
        isPending.value = true
        error.value = null
        
        // 校验ID是否有效
        if (!id) {
            error.value = '文档ID不能为空'
            isPending.value = false
            return
        }

        try {
            const docRef = projectFirestore.collection(collection).doc(id)
            const res = await docRef.delete()
            isPending.value = false
            return res
        } catch(err) {
            console.log(err.message)
            isPending.value = false
            error.value = '无法删除文档'
        }
    }

    return { error, isPending, deleteDoc }
}

export default useDocument

2. 调整组件逻辑，传递当前行文档ID #

你的模板是循环渲染多个文档，删除按钮需要绑定当前行的文档ID，而非通过组件props接收单一ID。修改组件script部分：

<script>
import useDocument from '../composables/useDocument'
import { useRouter } from 'vue-router'

export default {
    setup() {
        const { deleteDoc, error, isPending } = useDocument('orgaos')
        const router = useRouter()

        const handleDelete = async (docId) => {
            await deleteDoc(docId)
            // 删除后可添加刷新列表、页面跳转等逻辑
            // router.push('/orgaos')
        }
        
        return { handleDelete, error, isPending }
    }
}
</script>

3. 修改模板，绑定正确的删除参数 #

在模板的删除按钮点击事件中传入当前循环项的m.id，同时通过isPending禁用按钮避免重复操作：

<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.estado_orgao }}</td>
                        <td>
                            <button 
                                title="Eliminar" 
                                class="icon_delete" 
                                @click="handleDelete(m.id)"
                                :disabled="isPending"
                            >
                                <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" v-if="error">{{ error }}</div>
            </div>
        </div>
    </div>
</template>

额外注意事项 #

• 确保documents数组中的每个项都包含有效的Firebase文档ID字段id
• 模板中第四列原代码重复了m.sigfe_orgao，已修正为m.estado_orgao以匹配表头
• 删除成功后建议重新获取文档列表，保证页面数据与数据库同步

内容的提问来源于stack exchange，提问作者Jesse Ulundo