Firebase存储传图后更新用户数据库时数据被覆盖问题

你的判断没错，问题就出在这段代码里的setDoc调用：

await setDoc(userDocRef, { photoURL: downloadURL });

Firebase的setDoc方法默认会完全覆盖整个目标文档，原来存在的userInfo、姓名、年龄等字段，都会被你传入的仅包含photoURL的对象替换，自然就丢失了其他数据。

给你两种简单的修复方案：

方案一：用updateDoc仅更新指定字段 #

updateDoc是专门用来修改文档中指定字段的方法，不会影响其他原有数据，直接替换setDoc即可：

const userDocRef = doc(db, "profile", userInfo.userID);
await updateDoc(userDocRef, { photoURL: downloadURL });

方案二：保留setDoc但开启合并模式 #

如果因为某些场景必须使用setDoc，可以传入第三个参数{ merge: true }，让新数据和原有文档合并，不覆盖未指定的字段：

const userDocRef = doc(db, "profile", userInfo.userID);
await setDoc(userDocRef, { photoURL: downloadURL }, { merge: true });

额外提示 #

你代码里在调用uploadFile()后直接执行fetchData()，但uploadFile是异步操作，可能出现数据库还没更新完成就获取数据的情况，导致页面无法及时显示新头像。可以把fetchData()移到更新操作的成功回调里：

// 以updateDoc为例
await updateDoc(userDocRef, { photoURL: downloadURL });
fetchData(); // 确保数据更新后再拉取

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