React电商项目集成Firebase后商品详情页空白报错排查

详情页白屏崩溃是两个代码错误直接导致的：

• Firestore集合名拼写不一致：列表页读取的集合名为products，详情页查询时写的是productos，查询路径完全错误，返回的文档快照为空，此时调用快照的.data()方法会返回undefined，后续执行product.id = docSnapshot.id时，相当于给undefined赋值属性，直接抛出JS类型错误中断渲染。
• 缺少加载态与空值容错：组件首次渲染时Firebase数据还未返回，product初始值是空对象，若子组件CardDetail内部直接读取data上的属性（如商品名、价格、图片地址）做渲染，会在数据返回前触发属性不存在的报错，同样会导致白屏。
• 冗余代码不影响运行：代码中定义的productFilter变量全程未被调用，属于无效逻辑，不会引发崩溃。

1. 修正集合名拼写
   将详情页getProduct方法内的集合名改为和列表页一致的products：

// 原错误代码
const docRef = doc(db, "productos", id)
// 修正后
const docRef = doc(db, "products", id)

2. 新增文档存在性判断
   避免查询不到对应商品时操作空值报错：

const getProduct = async() => {
    const docRef = doc(db, "products", id)
    const docSnapshot = await getDoc(docRef)
    // 先校验文档是否存在
    if (!docSnapshot.exists()) {
        console.log("未查询到对应ID的商品")
        return null
    }
    let product = docSnapshot.data()
    product.id = docSnapshot.id
    return product
}

3. 补充加载状态与空值兜底
   避免数据未返回时渲染空值触发子组件报错：

const CardDetailContainer = () => {
    const { id } = useParams();
    const [product, setProduct] = useState(null);
    // 新增加载状态
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        setLoading(true);
        getProduct()
        .then( (prod) => {
            console.log("Respuesta getProduct: ", prod)
            setProduct(prod)
        })
        .catch(err => console.log("商品查询失败", err))
        .finally(() => {
            setLoading(false)
        })
    }, [id]);

    // 加载兜底
    if (loading) return <div className="loading">商品加载中...</div>
    // 商品不存在兜底
    if (!product) return <div className="error">当前商品不存在或已下架</div>

    return (
            <div className="details-container">
                <CardDetail data={product} />
            </div>
    );
};

修改完成后即可正常加载商品详情，同时可以删掉未使用的productFilter冗余代码减少无用逻辑。

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