Firebase v9查询更新文档失败：React Native Expo用户头像更新问题

我在使用React Native Expo和Firebase时遇到问题：用户通过Expo ImagePicker选择个人头像并获取URI后，希望将Firebase中users集合对应用户文档的photoUrl字段更新为头像上传后的下载URL。以下是相关代码（问题出在imgFirebase()函数中）：

const pickImage = async () => {
    try {
        // 启动图片库无需请求权限
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1,
        });

        if (!result.canceled) {
            auth.currentUser.photoURL = result.uri
            setImage(result.uri);
            imgFirebase()
        }
    } catch (E) {
        alert(E)
    }
};

async function imgFirebase() {
    const d = await fetch(image)
    const dd = await d.blob()
    const fileName = image.substring(image.lastIndexOf("/") + 1)
    const storage = getStorage();
    const storageRef = ref(storage, fileName);
    uploadBytes(storageRef, dd).then((snapshot) => {
        getDownloadURL(snapshot.ref).then(async (url) => {
            setUrl(url)
            
            const users = collection(db, "users");
            // 创建集合查询
            const q = query(users, where("uid", "==", uid));
            const querySnapshot = await getDocs(q);
            querySnapshot.forEach((doc) => {
                async function upadad() {
                    try {
                        updateDoc(q, {
                            photoUrl: url
                        })
                        console.log(doc.data())
                    } catch (e) {
                        alert(e)
                    }
                }
            });
        }).catch(e => {
            alert(e)
        })
    });
}

核心问题代码 #

const users = collection(db, "users");
// 创建集合查询
const q = query(users, where("uid", "==", uid));
const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
    async function upadad() {
        try {
            updateDoc(q, {
                photoUrl: url
            })
            console.log(doc.data())
        } catch (e) {
            alert(e)
        }
    }
});

问题分析与修正方案 #

1. updateDoc参数错误：updateDoc需要传入文档引用（DocumentReference），而非查询对象q。遍历querySnapshot时拿到的doc对象，可通过doc.ref获取对应的文档引用。
2. 异步函数未执行：定义了upadad异步函数但未调用，导致更新操作未触发。
3. 冗余遍历逻辑：用户uid唯一，查询结果只会有一个文档，无需遍历，直接取第一个结果即可。

修正后的imgFirebase函数 #

async function imgFirebase() {
    try {
        const d = await fetch(image);
        const dd = await d.blob();
        // 用用户uid作为文件名，避免重名覆盖
        const fileName = `${auth.currentUser.uid}_avatar`; 
        const storage = getStorage();
        const storageRef = ref(storage, fileName);
        
        // 改用async/await替代嵌套then，提升代码可读性
        const snapshot = await uploadBytes(storageRef, dd);
        const url = await getDownloadURL(snapshot.ref);
        
        setUrl(url);
        
        const users = collection(db, "users");
        const q = query(users, where("uid", "==", uid));
        const querySnapshot = await getDocs(q);
        
        if (!querySnapshot.empty) {
            // 获取匹配的文档引用并更新字段
            const userDocRef = querySnapshot.docs[0].ref;
            await updateDoc(userDocRef, { photoUrl: url });
            console.log("头像URL更新成功");
        } else {
            alert("未找到对应用户文档");
        }
    } catch (e) {
        alert(`操作失败：${e.message}`);
        console.error(e);
    }
}

额外优化建议 #

• 文件名去重：使用用户uid作为头像文件名，避免不同用户上传同名文件互相覆盖。
• 统一异步写法：用async/await替代嵌套then，让代码逻辑更清晰，错误处理更集中。
• 全局错误捕获：在函数最外层统一捕获所有异常，便于统一提示和排查问题。

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