使用Nuxt将Firestore文档指定字段渲染到表格对应td标签的实现问题

核心问题说明 #

你的代码核心问题是数据类型不匹配：

• Script部分你将SubPackagesDetails声明为数组类型，请求Firestore后也是往数组里push文档对象
• 模板部分你直接把SubPackagesDetails当作单个对象使用，调用SubPackagesDetails.xxx属性，数组本身不存在这些自定义字段，因此无法渲染出值。

以下分两种常用场景给出解决方案：

场景1：仅需要展示集合中的第一条文档 #

修改Script部分 #

将SubPackagesDetails的初始值改为对象类型，补充未声明的loading变量：

<script>
import firestore from "@/plugins/firebasetest";

export default {
    data: () => ({
        // 从数组改为对象类型
        SubPackagesDetails: {
            SubContractorName: '',
            WorkPackageContractorName: '',
            Package: '',
            Subwork: '',
            code: '',
            CommencementDate: '',
        },
        loading: true // 补充缺失的loading变量声明
    }),
    
    created() {
        this.refreshSubPackagesDetails();
    },

    methods: {
        refreshSubPackagesDetails() {
            firestore
                .collection("subsub")
                .get()
                .then(querySnapshot => {
                    // 取第一条查询到的文档赋值
                    if (!querySnapshot.empty) {
                        const doc = querySnapshot.docs[0]
                        this.SubPackagesDetails = { ...doc.data(), id: doc.id }
                    }
                    this.loading = false;
                    console.log(this.SubPackagesDetails);
                });
        },
    },
}
</script>

修改模板部分 #

添加可选链运算符避免异步请求未完成时报错，删除原生table不支持的无效items属性：

<template>
    <div id="SubPackageDetailTable">
        <h2>Sub-Packages Detail</h2>
        <table>
            <tr>
                <th>Subcontractor</th>
                <td>{{ SubPackagesDetails?.SubContractorName }}</td>
            </tr>
            <tr>
                <th>WPC</th>
                <td>{{ SubPackagesDetails?.WorkPackageContractorName }}</td>
            </tr>
            <tr>
                <th>Package</th>
                <td>{{ SubPackagesDetails?.Package }}</td>
            </tr>
            <tr>
                <th>Sub-Package</th>
                <td>{{ SubPackagesDetails?.Subwork }}</td>
            </tr>
            <tr>
                <th>Code</th>
                <td>{{ SubPackagesDetails?.code }}</td>
            </tr>
            <tr>
                <th>Commencement Date</th>
                <td>{{ SubPackagesDetails?.CommencementDate }}</td>
            </tr>
        </table>
    </div>
</template>

场景2：需要展示集合中所有查询到的文档 #

Script部分仅需补充loading变量声明即可，原有数组逻辑保持不变。模板部分用v-for循环遍历数组渲染每个文档对应的内容：

<template>
    <div id="SubPackageDetailTable">
        <h2>Sub-Packages Detail</h2>
        <!-- 循环渲染每个文档对应的表格 -->
        <table v-for="item in SubPackagesDetails" :key="item.id" style="margin: 20px 0;">
            <tr>
                <th>Subcontractor</th>
                <td>{{ item.SubContractorName }}</td>
            </tr>
            <tr>
                <th>WPC</th>
                <td>{{ item.WorkPackageContractorName }}</td>
            </tr>
            <tr>
                <th>Package</th>
                <td>{{ item.Package }}</td>
            </tr>
            <tr>
                <th>Sub-Package</th>
                <td>{{ item.Subwork }}</td>
            </tr>
            <tr>
                <th>Code</th>
                <td>{{ item.code }}</td>
            </tr>
            <tr>
                <th>Commencement Date</th>
                <td>{{ item.CommencementDate }}</td>
            </tr>
        </table>
    </div>
</template>

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