React中Firestore不覆盖旧字段添加新数组字段问题

你可以通过setDoc的merge选项，结合arrayUnion来实现需求——不管文档是否存在，都不会覆盖原有数据，而是合并新增的数组元素，无需手动切换或注释代码。

优化后的代码 #

const collectionRef = collection(db, 'data');

const handleSubmit = async (e) => {
    e.preventDefault();
    // 直接获取当前登录用户，替代submit函数内的监听逻辑
    const user = auth.currentUser;
    if (!user) {
        alert("请先登录");
        return;
    }
    const uid = user.uid;
    try {
        await setDoc(doc(collectionRef, uid), {
            // 用arrayUnion添加元素，避免覆盖原有数组
            food: arrayUnion(food),
            quantity: arrayUnion(quantity),
        }, { 
            // merge: true 确保存在的文档只更新指定字段，不覆盖整体
            merge: true 
        })

        alert("数据添加成功");
    } catch (error) {
        alert(`数据添加失败: ${error.message}`);
    }
}

为什么这样可行 #

• { merge: true } 参数：如果文档已存在，仅更新传入的字段；如果文档不存在，则创建新文档，完美替代了手动切换setDoc和updateDoc的操作。
• arrayUnion：将新元素追加到数组中，且自动避免重复（如果不需要去重，可先获取原有数组再手动push后更新，但会增加一次读操作，不推荐）。

备选方案（需额外读操作） #

如果不想使用merge选项，也可以先检查文档是否存在，再选择对应的操作：

const collectionRef = collection(db, 'data');

const handleSubmit = async (e) => {
    e.preventDefault();
    const user = auth.currentUser;
    if (!user) {
        alert("请先登录");
        return;
    }
    const uid = user.uid;
    const docRef = doc(collectionRef, uid);
    try {
        const docSnap = await getDoc(docRef);
        if (docSnap.exists()) {
            await updateDoc(docRef, {
                food: arrayUnion(food),
                quantity: arrayUnion(quantity),
            });
        } else {
            await setDoc(docRef, {
                food: [food],
                quantity: [quantity],
            });
        }
        alert("数据添加成功");
    } catch (error) {
        alert(`数据添加失败: ${error.message}`);
    }
}

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