Javascript 访问React中的嵌套Firestore数据？

在过去的几个小时里，我一直在讨论这个问题，我之所以这么快发布一个问题，唯一的原因是因为没有太多关于这个主题的信息，或者至少没有太多关于这个特定点的信息

我目前有一个云函数，可以从第三方API获取数据并将其保存到我的Firebase Firestore数据库中。在我的前端应用程序中，我使用React并试图通过将数据映射到列表项来显示这些数据。树中的所有高级项都可以访问，并且这些项中的所有数据都已正确显示

但任何嵌套项都返回“无法读取未定义的属性”。当控制台记录我的顶级容器时，所有后续数据都显示在终端中。我可以将其分解到顶层阵列，它向我展示了以下结构：

我需要访问这些对象中的键，但正如我前面提到的，当我尝试访问这些对象时，会遇到以下情况：

Uncaught TypeError: Cannot read property 'title' of undefined
    at ProductScreen (ProductScreen.js:56)

下面是我正在处理的当前屏幕的代码，以及我如何尝试访问数据：

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { detailsProduct } from '../actions/productActions';

const ProductScreen = (props) => {
    const [qty, setQty] = useState(1);
    const productDetails = useSelector(state => state.productDetails);
    const { product, loading, error } = productDetails;
    const resp = props.match.params.id;
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(detailsProduct(resp));
        return () => {
            //
        };
    }, []);

    const handelAddToCart = () => {
        props.history.push(`/cart/${resp}/?qty=${qty}`)
    }

    return <div>
        <div className='back-to-result'>
            <Link to='/'>Back to Results</Link>
        </div>
        {loading ? <div>Loading...</div> :
            error ? <div>{error}</div> :
                (
                    <div className='details'>
                        <div className='details-image'>
                            <img src={product.thumbnailImage //This ever comes through as well} alt='product'></img> 
                        </div>
                        <div className='details-info'>
                            <ul>
                                <li>
                                    <h4>{product.title}</h4> //This data comes through fine.
                                </li>
                                <li>
                                    {product.rating} Stars ({product.numReviews} Reviews)
                                </li>
                                <li>
                                    <b>{product.variants.price}</b>
                                </li>
                                <li>
                                    Description:
                                    <div>
                                        {product.description // This data comes through fine} 
                                    </div>
                                    <div>
                                        <select>
                                            {
                                            console.log(product.sizes.title // Here is where I am trying to console log the Size Title) 
                                            }

                                        </select>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div className='details-action'>
                            <ul>
                                <li>
                                    <b>Price:</b> ${product.variants.price // This data does not come through either, has the same error} 
                                </li>
                                <li>
                                    Status: Currently Unavailable
                                </li>
                                <li>
                                    Qty: <select>
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                    </select>
                                </li>
                                <li>
                                    <button className='button' onClick={handelAddToCart}>Add to Cart</button>  
                                </li>
                            </ul>
                        </div>
                    </div>
                )
        }
    </div>
}

export default ProductScreen

import React，{useffect，useState}来自“React”；
从'react router dom'导入{Link}；
从“react-redux”导入{useSelector，useDispatch}；
从“../actions/productActions”导入{detailsProduct}；
const ProductScreen=（道具）=>{
const[qty，setQty]=useState（1）；
const productDetails=useSelector（state=>state.productDetails）；
const{product，loading，error}=productDetails；
const resp=props.match.params.id；
const dispatch=usedpatch（）；
useffect（（）=>{
调度（详细产品（resp））；
return（）=>{
//
};
}, []);
常量HandeladToCart=（）=>{
props.history.push（`/cart/${resp}/？qty=${qty}`）
}
返回
返回结果
{加载？加载…：
错误？{error}：
(


{product.title}//此数据通过fine获得。


{product.rating}明星（{product.numReviews}评论）


{product.variants.price}


说明：
{product.description//此数据来自fine}
{
log（product.sizes.title//这里是我试图用控制台记录大小标题的地方）
}




价格：${product.variants.Price//此数据也无法通过，具有相同的错误}


状态：当前不可用


数量：
1.
2.
3.
4.


添加到购物车


)
}
}
导出默认产品屏幕

我不知道我哪里做错了，也不知道我做错了什么。任何帮助都将不胜感激。多谢各位

---

*对于最初没有包含主代码表示歉意，我不确定如果我只做控制台日志记录是否会有帮助，但我希望这能够更好地了解情况。

在多次控制台日志之后，我设法找出了问题所在。我发现我的数据是如何进入我的应用程序的。经过进一步的研究，我发现了一个关于React状态的Stackoverflow问题，这就是我的问题所在。在通过Redux进行的状态控制中，我只有初始状态为{}的顶级对象，但我发现，对于对象，还需要设置该对象中任何数组的初始状态，如果要返回这些数组中的对象，还需要设置这些数组的状态。结果会是这样的：

state = { mainObj: { array: [], arrayWithObj: [{}]} }

您将继续对整个数据结构执行此操作。这一切都是在我的Redux reducer函数中完成的。唯一不必这样做的警告是，如果你的顶级项目是一个数组，那么你不必分解这个结构，至少这是我在另一个页面上看到的

---

我希望这能帮助其他人解决这个问题。

你能分享一些代码示例吗？请，代码和错误都应该以正确的格式共享，而不是使用图像。@MaiKaYI我已经用新的格式和我现在正在处理的主屏幕的代码更新了这篇文章。