显示无法读取未定义的读取名称的属性

Question

const page = (props) => {
    const slug = props.params.id
    // console.log(slug)
    const [showModal, setShowModal] = useState(false)
    // const [pDetail, setPDetail] = useState(null)
    let prod

    useEffect(() => {
        fetchProductDetail()
    }, [])
    const fetchProductDetail = async () => {
        const { data } = await fetchDataFromApi(`/api/products?populate=*&[filters][slug][$eq]=${slug}`)
        console.log(data[0])
        prod = data?.[0].attributes
    }

    return (
        <div className={styles.productDetailPage}>

            <div className={styles.productDPageTop}>
                <div className={styles.productSearch}>
                    <BiSearchAlt size={20} />
                    <input type="text" placeholder='Search Products' />
                </div>
                <div className={styles.productCategory}>
                    Category <BiChevronDown />
                </div>
            </div>

            <div className={styles.productDPageMiddle}>
                <div className={styles.pdpmBack}><div className={styles.backIcon}><BiLeftArrowAlt /></div>Go Back To<Link href="#">Beam light Series</Link></div>
                <div className={styles.pdpmMain}>
                    <div className={styles.pdpmmLeft}>
                        <img src="/img/product.png" alt="" />
                        <div className={styles.pdpmmlImgList}>
                            <img src="/img/product.png" alt="" />
                            <img src="/img/product.png" alt="" />
                            <img src="/img/product.png" alt="" />
                            <img src="/img/product.png" alt="" />
                            <img src="/img/product.png" alt="" />
                            <img src="/img/product.png" alt="" />
                            <img src="/img/product.png" alt="" />
                        </div>
                    </div>
                    <div className={styles.pdpmmRight}>
                        <div className={styles.pdpmmrDes}>
                            <div className={styles.pdpmmrdHead}>{prod.name}</div>
                            <div className={styles.pdpmmrdCat}>
                                <span>Category</span>
                                <div>Architectural Lights</div>
                            </div>
                            <div className={styles.pdpmmrdDes}>
                                <span>Description</span>
                                <div>Lorem ipsum dolor sit amet consectetur. Risus fusce faucibus ullamcorper at quam id augue id. Consectetur vel ac cras augue dui justo orci. Luctus tincidunt vel vulputate nulla tincidunt maecenas. In consequat cursus velit vel vulputate nulla tincidunt maecenas. In consequat cursus velit . <Link href="#">Download PDF</Link></div>
                            </div>
                        </div>
                        <div className={styles.pdpmmrWatt}>
                            <div className={styles.pdpmmrwBtn}>120 W</div>
                            <div className={styles.pdpmmrwBtn}>150 W</div>
                            <div className={styles.pdpmmrwBtn}>200 W</div>
                        </div>
                        <div className={styles.pdpmmrBtn}>
                            <div className={styles.pdpmmrbTop}>
                                <div className={styles.pdpmmrbtWhatsapp}><FaWhatsapp />Whatsapp</div>
                                <div className={styles.pdpmmrbtEnquire} onClick={() => setShowModal(true)}>Enquire</div>
                            </div>
                            <div className={styles.pdpmmrbBottom}>Preferred to call ? <span>Call Now <BiPhoneCall /></span></div>
                        </div>
                    </div>
                </div>
            </div>

            <div className={styles.product}>
                <Heading className={styles.heading} text="Related Products" />
                <div className={styles.productWrap}>
                    <ProductCard />
                    <ProductCard />
                    <ProductCard />
                </div>
                <div className={styles.viewBtnWrap}><div className={styles.viewBtn}>View All</div></div>
            </div>

            {showModal && (<Modal closeModal={() => setShowModal(false)} />)}

        </div>
    )
}

export default page

在上面的问题中，数据[0]得到了安慰，但是当我尝试在名称中显示时，它显示错误

我正在尝试使用搜索栏中网址中的 slug 显示产品详细信息，并且也发出了请求，但不知道为什么在从 Strapi 获取产品详细信息时显示错误，请任何人帮助我