如何将Firestore查询结果存入React组件的数组状态？

问题概述 #

已成功从Firestore获取包含order_id和orders_data的订单数据并在控制台打印，但无法通过setOrders更新orders状态；尝试了代码中注释的写法，依然无效。

核心问题与修复方案 #

1. 状态更新逻辑错误（注释代码无效的原因） #

你的注释代码中使用querySnapshot.forEach()生成订单数组，但**forEach没有返回值**——它仅遍历执行回调函数，最终传递给setOrders的是undefined，自然无法更新状态。

正确做法是使用map方法，遍历querySnapshot.docs数组，返回包含订单id和data的对象数组：

// 替换注释的代码段
const fetchedOrders = querySnapshot.docs.map(doc => ({
  id: doc.id,
  data: doc.data()
}));
setOrders(fetchedOrders);

2. useEffect依赖缺失 #

原useEffect的依赖数组为空[]，但user是从StateProvider获取的异步状态（比如用户登录后才会有值），空数组会导致useEffect仅在组件挂载时执行一次，此时user可能还未加载完成，无法正确获取订单。

需要将user加入依赖数组，确保user变化时重新执行数据获取：

useEffect(() =>{
  // ... 内部逻辑不变
}, [user]); // 把user加入依赖

3. 组件渲染时未返回元素 #

• Orders组件：orders?.map内部没有返回Order组件，导致渲染不出订单列表，需添加return或使用隐式返回（同时加key避免React警告）：

// 修复后
{orders?.map(order =>(
  <Order key={order.id} order={order}/>
))}

• Order组件：order.data.basket?.map内部同样未返回CheckoutProduct组件，需做相同修复：

// 修复后
{order.data.basket?.map(item =>(
  <CheckoutProduct
    key={item.id}
    id={item.id}
    title={item.title}
    image={item.image}
    price={item.price}
    rating={item.rating}
  />
))}

完整修改后的代码 #

Orders.js #

import React, { useEffect, useState } from 'react';
import './Orders.css';
import { db } from './firebase';
import { useStateValue } from './StateProvider';
import { query, getDocs, orderBy, collection } from "firebase/firestore";
import Order from './Order';

function Orders() {
  const [{ basket, user }, dispatch] = useStateValue();
  const [orders, setOrders] = useState([]);

  useEffect(() =>{
    if(user){
      async function fetchData() {
        const ordersRef = collection(db,"users",user.uid, "orders");
        const q = query(ordersRef, orderBy("created", "desc"));
        const querySnapshot = await getDocs(q);
        
        // 正确生成订单数组并更新状态
        const fetchedOrders = querySnapshot.docs.map(doc => ({
          id: doc.id,
          data: doc.data()
        }));
        setOrders(fetchedOrders);
      }
      fetchData();
     }else{
       setOrders([]);
     }  
  }, [user]); // 添加user依赖

  return (
    <div className="orders">
        <h1>Your Orders</h1>
        <div className="orders__order">
          {orders?.map(order =>(
            <Order key={order.id} order={order}/>
          ))}
        </div>
    </div>
  )
}

export default Orders

Order.js #

import React from 'react';
import CheckoutProduct from './CheckoutProduct';
import './Order.css';
import moment from 'moment';

function Order({order}) {
  return (
    <div className="order">
        <h2>Order</h2>
        <p>{moment.unix(order.data.created).format("MMMM Do YYYY, h:mma")}</p>
        <p className="order__id">
            <small>{order.id}</small>
        </p>
        {order.data.basket?.map(item =>(
          <CheckoutProduct
            key={item.id}
            id={item.id}
            title={item.title}
            image={item.image}
            price={item.price}
            rating={item.rating}
          />
        ))}
    </div>
  )
}

export default Order

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