对象数组的长度显示为 0 但它包含对象

Question

Console log of the array of object variable with it's length as 0

名为 products 的对象变量数组在另一个组件中声明，在该组件中使用 push() 方法使用对象进行初始化，并将其作为 prop 传递到此组件中。 但是，这个“产品”变量的长度显示为 0，而且像 forEach 和 map 这样的数组函数也在使用这个变量。

Orders.js

import "./Orders.css";
import SearchIcon from "@material-ui/icons/Search";
import { useSelector } from "react-redux";
import { selectUser } from "../../features/userSlice";
import db from "../../firebase";
import OrderedProducts from "./OrderedProducts";

function Orders() {
    const user = useSelector(selectUser);
    const [orders, setOrders] = useState([]);

    useEffect(() => {
        if (user) {
            db.collection("users")
                .doc(user.id)
                .collection("orders")
                .onSnapshot((OrderSnapshot) => {
                    setOrders(
                        OrderSnapshot.docs.map((order) => {
                            let productsArr = [];
                            order.data().products.forEach((cartProduct) => {
                                db.collection("products")
                                    .where("productId", "==", cartProduct.productId)
                                    .onSnapshot((productSnapshot) => {
                                        const product = productSnapshot.docs[0].data();
                                        productsArr.push({
                                            id: product.productId,
                                            image: product.image,
                                            title: product.title,
                                            quantity: cartProduct.quantity,
                                            amount: product.specialPrice * cartProduct.quantity,
                                        });
                                    });
                            });
                            return {
                                id: order.id,
                                amount: order.data().amount,
                                products: productsArr,
                                created: order.data().created,
                            };
                        })
                    );
                });
        }
    }, [user]);

    return (
        <div className="orders">
            <div className="orders__search">
                <input type="text" placeholder="Search your orders here" />
                <button>
                    <SearchIcon />
                    Search Orders
                </button>
            </div>
            {orders.map((order) => (
                <OrderedProducts key={order.id} order={order} />
            ))}
        </div>
    );
}

export default Orders;

OrderedProducts.js

import "./OrderedProducts.css";

function OrderedProducts({ order: { created, amount, products } }) {
    console.log("Length >> ", products.length);
    console.log("Products >> ", products);

    return (
        <div className="orderedProducts">
            <div className="orderedProducts__list">
                <p>{amount}</p>
                {products?.map((product) => (
                    <div key={product.id} className="orderedProducts__listItem">
                        <div className="orderedProducts__image">
                            <img src={product.image} alt="" />
                        </div>
                        <div className="orderedProducts__info">
                            <h3>{product.title}</h3>
                            <p>Quantity: {product.quantity}</p>
                            <p>Seller: ECommSuper</p>
                        </div>
                    </div>
                ))}
            </div>
            <div className="orderedProducts__status"></div>
        </div>
    );
}

export default OrderedProducts;