Next13+Firebase电商Cart组件报错：Cannot读取undefined的indexOf

错误原因 #

报错TypeError: Cannot read properties of undefined (reading 'indexOf')的核心问题：

• 初始状态下user是空对象{}，此时user.uid为undefined，调用doc(db, "users", user.uid)时，Firestore内部处理文档路径会因传入undefined触发错误。
• userUpdate函数未在useEffect主逻辑中执行，反而放在清理函数里，导致user状态无法及时同步currentUser，进一步加剧了user.uid为undefined的问题。

修复方案 #

优化后的代码 #

直接使用useAuth提供的currentUser，避免本地状态更新的延迟问题，同时增加边界判断：

"use client"
import React, { useState, useEffect } from 'react'
// ...保留你的其他导入（如Image、router等）
import { doc, onSnapshot } from 'firebase/firestore'
import { useAuth } from '你的Auth上下文导入路径'
import { useRouter } from 'next/navigation'

const Cart = () => {
    const router = useRouter();
    const [items, setItems] = useState(0);
    const [visible, setVisible] = useState(false);
    const { currentUser } = useAuth();

    useEffect(() => {
        // 用户未登录时直接返回，避免无效监听
        if (!currentUser) return;

        // 直接用currentUser的uid创建文档引用
        const userRef = doc(db, "users", currentUser.uid);
        const unsub = onSnapshot(userRef, (docSnap) => {
            const userData = docSnap.data();
            // 处理用户文档未创建的情况
            if (!userData) {
                setItems(0);
                setVisible(false);
                return;
            }
            // 用可选链避免shoppingCart不存在时的报错
            const cartLength = userData.shoppingCart?.length || 0;
            setItems(cartLength);
            setVisible(cartLength > 0);
        });

        // 清理函数仅取消订阅
        return unsub;
    }, [currentUser]); // 依赖currentUser，登录状态变化时重新执行监听

    const clickHandler = (e) => {
        e.preventDefault();
        router.push('/ShoppingCart');
    };

    return (
        <>
            {(currentUser && visible) ? (
                <button onClick={clickHandler} className='CartButton'>
                    <span className="ItemCount">{items}</span>
                    <Image src={CartImage} alt="Cart-Image" height={40} width={40} />
                </button>
            ) : null}
        </>
    )
}

export default Cart

关键修改点 #

• 移除冗余的user状态，直接使用currentUser获取uid，避免状态更新延迟。
• 在useEffect中增加currentUser存在判断，防止传入无效参数到Firestore。
• 给shoppingCart添加可选链?.，避免字段不存在时读取length报错。
• 调整useEffect依赖数组为[currentUser]，确保登录状态变化时重新建立监听。
• 增加用户文档不存在的兜底处理，避免空数据导致的逻辑异常。

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