React中Firebase Firestore arrayUnion无法触发快照监听器问题

问题概述 #

在React项目中使用Firebase Firestore时遇到如下异常：

• 使用arrayUnion更新文档内的对象数组时，数据库内容已正确修改，但快照监听器未触发；
• 修改字符串字段（如username）时，监听器可正常触发；
• 改用直接构造新数组更新的方式后，初期有效，但一段时间后监听器仍会停止触发。

核心原因与解决方案 #

1. 监听器的useEffect依赖数组缺失 #

不管是组件内还是firebase.ts中的监听器，都使用了空依赖数组[]，导致仅在组件挂载时执行一次。若初始user为null，后续user状态更新后不会重新创建监听器；即使监听器已创建，也无法响应user状态的变化。

修复代码：

组件内的监听器：

useEffect(() => {
    console.log("user)");
    let unsubscribe;
    if (user) {
        unsubscribe = onSnapshot(doc(db, "users", user.id), (doc) => {
            if (doc.exists()) {
                console.log("updating user data");
                const userData = { ...doc.data(), id: doc.id } as User;
                console.log(userData);
                setUser(userData);
            } else {
                console.log("couldn't update user data");
            }
        });
    }
    return () => unsubscribe?.(); // 确保组件卸载时取消订阅
}, [user]); // 加入user作为依赖，状态变化时重建监听器

firebase.ts中的监听器：

useEffect(() => {
    let unsubscribe;
    if (user) {
        console.log("user not null in firebaset.ts")
        unsubscribe = onSnapshot(doc(db, "users", user.id), (doc) => {
            if (doc.exists()) {
                console.log("updating user data");
                const userData = { ...doc.data(), id: doc.id } as User;
                console.log(userData);
                setUser(userData);
            } else {
                console.log("couldn't update user data");
            }
        });
    }
    return () => unsubscribe?.();
}, [user]); // 加入user作为依赖

2. 监听器内部更新user导致的重复订阅优化 #

在firebase.ts中，监听器触发时调用setUser(userData)会导致user状态更新，进而触发useEffect重新执行，销毁旧订阅并创建新订阅。虽然功能正常，但可通过数据对比避免不必要的状态更新：

useEffect(() => {
    let unsubscribe;
    if (user) {
        console.log("user not null in firebaset.ts")
        unsubscribe = onSnapshot(doc(db, "users", user.id), (doc) => {
            if (doc.exists()) {
                console.log("updating user data");
                const userData = { ...doc.data(), id: doc.id } as User;
                // 仅当数据真正变化时更新状态
                if (JSON.stringify(userData.cart) !== JSON.stringify(user.cart)) {
                    setUser(userData);
                }
                console.log(userData);
            } else {
                console.log("couldn't update user data");
            }
        });
    }
    return () => unsubscribe?.();
}, [user]);

注：可根据实际需求替换为更精确的字段对比（如仅对比cart字段），提升性能。

3. arrayUnion更新的对象序列化问题 #

确保CartProduct对象的字段类型与Firestore存储的完全一致，避免因类型不匹配导致监听器无法识别更新：

const cartProduct: CartProduct = selectedVariation === null
    ? {
          product: product.firestoreId as string,
          quantity: Number(quantity),
      }
    : {
          product: product.firestoreId as string,
          quantity: Number(quantity),
          selectedVariationId: selectedVariation as string,
      };

4. 直接构造数组更新的引用问题 #

更新数组时必须创建新的数组实例，避免因引用未变化导致Firestore无法识别更新：

// 错误写法：直接修改原数组引用
// const newCart = user.cart;
// newCart.push(cartProduct);

// 正确写法：创建新数组
const newCart = [...user.cart, cartProduct];
updateDoc(doc(db, "users", user.id), { cart: newCart });

额外排查步骤 #

1. 查看Firebase控制台的文档修改记录，确认每次更新都生成了新的快照版本；
2. 在监听器回调中打印doc.metadata.hasPendingWrites，排查本地缓存同步问题；
3. 启用Firestore调试模式：firebase.firestore().setLogLevel('debug')，通过控制台日志查看监听器是否收到更新通知。

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