Firestore如何从含映射数组的文档中提取数据转为可用数组

我是自学新手，若有浅显问题还请见谅。我尝试用getDoc获取Firestore里的文档，把里面的数据转成数组用作表格数据。我已经把数据存在包含dataExcel对象（内部是映射数组）的文档里，存储代码如下：

const submitGrades = async () => {
    await setDoc(doc(db, 'EventData', 'Game 1' + ' PlayData'), {dataExcel})
    await setDoc(doc(db, "EventData", 'Game 1' + ' PlayerData'), {playerData})
}

我知道这个结构不适合复杂查询，但只要拉取整份文档后用JavaScript排序就行。我已经通过下面的代码成功获取文档：

const Fetch = async () => {
    const dataRef = doc(db, 'EventData', 'Game 1 PlayData');

    const data = await getDoc(dataRef);
    console.log(data);
}

但我没法提取其中的映射数组、存入状态并用作表格数据。当前数据结构是文档内嵌套dataExcel对象，dataExcel里是带键的数组项；目标是把这些数据转成可直接用于表格的数组格式。

步骤1：提取文档中的dataExcel数据 #

用data.data()获取文档的纯数据对象，然后取出dataExcel：

const Fetch = async () => {
    const dataRef = doc(db, 'EventData', 'Game 1 PlayData');
    const docSnap = await getDoc(dataRef);
    
    if (docSnap.exists()) {
        // 获取文档里的dataExcel对象
        const rawData = docSnap.data().dataExcel;
        console.log(rawData);
    } else {
        console.log("文档不存在");
    }
}

步骤2：将映射数组转为表格可用的数组 #

把dataExcel里的每个键对应的对象提取出来，组成新数组：

const Fetch = async () => {
    const dataRef = doc(db, 'EventData', 'Game 1 PlayData');
    const docSnap = await getDoc(dataRef);
    
    if (docSnap.exists()) {
        const rawData = docSnap.data().dataExcel;
        // 将对象的值转为数组（即提取每个映射项）
        const tableData = Object.values(rawData);
        console.log(tableData); // 这就是表格可用的数组格式
    } else {
        console.log("文档不存在");
    }
}

步骤3：存入状态（以React为例） #

如果是React项目，用useState存储表格数据：

import { useState, useEffect } from 'react';
import { doc, getDoc } from "firebase/firestore";
import { db } from './firebaseConfig'; // 替换成你的Firebase配置路径

const YourComponent = () => {
    const [tableData, setTableData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const dataRef = doc(db, 'EventData', 'Game 1 PlayData');
            const docSnap = await getDoc(dataRef);
            
            if (docSnap.exists()) {
                const rawData = docSnap.data().dataExcel;
                const formattedData = Object.values(rawData);
                setTableData(formattedData);
            } else {
                console.log("文档不存在");
            }
        };

        fetchData();
    }, []);

    // 渲染表格
    return (
        <table>
            <thead>
                <tr>
                    {/* 假设你的数据有这些字段，根据实际调整 */}
                    <th>姓名</th>
                    <th>分数</th>
                    <th>时间</th>
                </tr>
            </thead>
            <tbody>
                {tableData.map((item, index) => (
                    <tr key={index}>
                        <td>{item.name}</td>
                        <td>{item.score}</td>
                        <td>{item.time}</td>
                    </tr>
                ))}
            </tbody>
        </table>
    );
};

export default YourComponent;

额外说明 #

如果dataExcel里的键需要排序后再提取，可以用Object.entries先获取键值对，排序后再提取值：

// 按键名排序后提取值
const formattedData = Object.entries(rawData)
  .sort(([keyA], [keyB]) => keyA.localeCompare(keyB))
  .map(([key, value]) => value);

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