如何获取Web应用已登录用户UID并关联Firestore文档？

核心错误点 #

1. 登录状态获取时机错误：页面加载时直接同步获取auth.currentUser，此时Firebase Auth还未完成用户登录状态的异步初始化，auth.currentUser为null，访问user.uid会抛出"Cannot read properties of null (reading 'uid')"错误。
2. 缺失Firestore SDK导入：代码中使用了Firestore相关操作，但未导入对应的SDK函数，导致firestore()方法未定义。
3. Firestore初始化方式错误：新版本Firebase Web SDK需通过getFirestore方法初始化Firestore实例，而非直接调用firestore()。

修正方案 #

1. 使用onAuthStateChanged监听用户登录状态，确保仅在用户已登录时执行后续操作。
2. 导入Firestore所需的SDK函数：getFirestore、collection、doc、setDoc。
3. 正确初始化Firestore实例，并将依赖用户UID的操作移至登录状态回调内。

修正后的完整代码 #

<script type="module">
    // Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.3.1/firebase-app.js";
    import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.3.1/firebase-analytics.js";
    import { getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword, signOut, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.3.1/firebase-auth.js";
    // 新增Firestore相关导入
    import { getFirestore, collection, doc, setDoc } from "https://www.gstatic.com/firebasejs/10.3.1/firebase-firestore.js";

    // Your web app's Firebase configuration
    const firebaseConfig = {
        apiKey: "**",
        authDomain: "**",
        projectId: "**",
        storageBucket: "**",
        messagingSenderId: "**",
        appId: "**",
        measurementId: "**"
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    const analytics = getAnalytics(app);
    const auth = getAuth(app); // 初始化Auth时传入app实例
    const db = getFirestore(app); // 正确初始化Firestore实例

    let userDocument; // 提前声明用户文档引用变量

    // 监听用户登录状态变化
    onAuthStateChanged(auth, (user) => {
        if (user) {
            // 用户已登录，获取UID并初始化文档引用
            const userId = user.uid;
            const usersCollection = collection(db, "users");
            userDocument = doc(usersCollection, userId);
        } else {
            // 用户未登录，可跳转至登录页或提示登录
            console.log("用户未登录");
            // 示例：window.location.href = 'login.html';
        }
    });

    function submitForm() {
        // 先检查用户是否已登录，避免未登录时操作
        if (!userDocument) {
            console.error("用户未登录，无法提交数据");
            return;
        }

        const movieSelect = document.getElementById("movieSelect");
        const seatCount = document.getElementById("seatCount").value;
        const showTime = document.getElementById("showTime").value;

        const movieName = movieSelect.options[movieSelect.selectedIndex].text;

        const userData = {
            ticketCount: parseInt(seatCount),
            showTiming: showTime,
            movieName: movieName
        };

        // 使用setDoc写入数据（和doc.set()功能一致，是新版本推荐写法）
        setDoc(userDocument, userData)
            .then(() => {
                console.log("用户数据存储成功！");
                window.location.href = 'selectseats.html';
            })
            .catch((error) => {
                console.error("存储用户数据出错: ", error);
            });
    }
</script>

关键说明 #

• onAuthStateChanged是Firebase Auth提供的异步状态监听方法，会在页面加载完成后自动同步用户登录状态，确保获取到有效的user对象。
• 所有依赖用户UID的Firestore操作必须在用户登录状态确认后执行，避免null引用错误。
• 导入Firestore SDK时需确保版本与其他Firebase SDK一致（此处为10.3.1），避免版本兼容问题。

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