如何通过userID关联Orders与Users文档并在表格展示用户信息？

核心思路是先将用户数据转换为以userID为键的映射表，再遍历订单数据匹配对应的用户信息，最后渲染合并后的完整数据。

1. 修改数据获取与关联逻辑 #

替换原有的useEffect代码，并行获取用户和订单数据，完成关联后存入新状态：

import React, { useEffect, useState } from "react";
import Layout from "../components/Layout";
import { collection, query, getDocs } from "firebase/firestore";
import { db } from "../utils/firebase";

const Orders = () => {
    // 新增状态：存储关联了用户信息的订单数据
    const [ordersWithUsers, setOrdersWithUsers] = useState([]);
    const ordersCollectRef = query(collection(db, "Orders"));
    const userCollectionRef = query(collection(db, "User"));

    useEffect(() => {
        const fetchAndLinkData = async () => {
            // 并行请求用户和订单数据，提升加载效率
            const [usersSnap, ordersSnap] = await Promise.all([
                getDocs(userCollectionRef),
                getDocs(ordersCollectRef)
            ]);

            // 将用户数据转为映射表（键为userID），方便快速查找
            const userMap = usersSnap.docs.reduce((acc, doc) => {
                const user = { ...doc.data(), id: doc.id };
                acc[user.id] = user;
                return acc;
            }, {});

            // 遍历订单，匹配对应用户信息
            const linkedOrders = ordersSnap.docs.map(orderDoc => {
                const order = orderDoc.data();
                // 匹配用户，无对应用户则返回空对象避免报错
                const matchedUser = userMap[order.userID] || {};
                return {
                    ...order,
                    user: matchedUser,
                    orderId: orderDoc.id // 可选：保留订单自身ID
                };
            });

            setOrdersWithUsers(linkedOrders);
        };

        fetchAndLinkData();
    }, []);

2. 修改表格渲染逻辑 #

直接遍历关联后的ordersWithUsers数组，同时渲染订单和用户字段，并处理数据缺失的边界情况：

<table className="table-auto w-full text-base text-left text-gray-900">
    <thead className="text-sm text-gray-700 uppercase bg-gray-50">
        <tr>
            <th scope="col" className="py-3 px-6">First</th>
            <th scope="col" className="py-3 px-6">Last Name</th>
            <th scope="col" className="py-3 px-6">Contact</th>
            <th scope="col" className="py-3 px-6">Address</th>
            <th scope="col" className="py-3 px-6">Order Total</th>
            <th scope="col" className="py-3 px-6">Shipping Fee</th>
            <th scope="col" className="py-3 px-6">Grand Total</th>
            <th scope="col" className="py-3 px-6">Actions</th>
        </tr>
    </thead>
    <tbody>
        {ordersWithUsers.map((order, index) => (
            <tr className="bg-white border-b" key={index}>
                <th scope="row" className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap">
                    {order.user.fName || "N/A"}
                </th>
                <td className="py-4 px-6">{order.user.lName || "N/A"}</td>
                <td className="py-4 px-6">
                    {order.user.contact?.primary || order.user.contact?.secondary || "N/A"}
                </td>
                <td className="py-4 px-6">
                    {order.user.shippingAddress 
                        ? `${order.user.shippingAddress.street},<br/>${order.user.shippingAddress.parish}` 
                        : "N/A"}
                </td>
                <td className="py-4 px-6">{order.orderTotal}</td>
                <td className="py-4 px-6">{order.shippingFee}</td>
                <td className="py-4 px-6">{order.grandTotal}</td>
                <td className="py-4 px-6 items-center justify-center flex space-x-2 text-white font-medium font-serif">
                    <button className="w-16 h-8 rounded-md bg-blue-500"> edit </button>
                    <button className="w-16 h-8 rounded-md bg-red-500"> delete </button>
                </td>
            </tr>
        ))}
    </tbody>
</table>

关键说明 #

• 用户映射表：用reduce将用户数组转为对象，通过userID直接查找用户，比每次遍历数组效率更高（尤其数据量大时）。
• 并行请求：Promise.all同时发起用户和订单请求，避免串行请求导致的加载延迟。
• 边界处理：用|| "N/A"和可选链?.防止数据缺失时抛出错误，保证页面稳定。

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