如何解决Firebase中的'Uncaught SyntaxError'与'newuser未定义'问题

错误原因及修复步骤 #

错误1：Uncaught SyntaxError: Unexpected reserved word #

• 核心原因：使用await但未将函数标记为async；Firestore相关API未导入且未初始化实例；提前获取表单值导致拿到空数据；代码中存在多余的*符号。
• 修复：
  1. 取消Firestore导入代码的注释，引入getFirestore、collection、addDoc
  2. 初始化Firestore实例：const db = getFirestore(app);
  3. 将处理点击事件的函数标记为async
  4. 移除代码中多余的*符号
  5. 将表单值的获取逻辑移到点击事件内部，确保获取用户提交时的最新输入

错误2：Uncaught ReferenceError: newuser is not defined #

• 核心原因：模块脚本（type="module"）的变量默认不暴露到全局，onclick属性无法直接访问模块内的函数。
• 修复：移除HTML按钮的onclick属性，改用JavaScript的addEventListener绑定点击事件

修复后完整代码 #

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!--<link href="index.css" rel="stylesheet" />-->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <!--<script src="./src/index.js"></script>-->

        <title>DB Test</title>
    </head>
    <body>
        <a><h1>DB Test</h1></a>

        <div class="input-box">
            <input id="email" type="text" name="username" placeholder="email">
            <label for="email">Email</label>
        </div>

        <div class="input-box">
            <input id="password" type="password" name="password" placeholder="pw">
            <label for="password">password</label>
        </div>

        <div class="input-box">
            <input id="loc" type="text" name="loc" placeholder="loc">
            <label for="loc">location</label>
        </div>

        <div class="input-box">
            <input id="phone_num" type="text" name="phone_num" placeholder="phone_num">
            <label for="phone_num">phone_num</label>
        </div>

        <div class="input-box">
            <input id="JMT" type="text" name="JMT" placeholder="JMT">
            <label for="JMT">JMT</label>
        </div>

        <input type="button" id="button" value="submit">

        <script type="module">
            // Import the functions you need from the SDKs you need
            import { initializeApp } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-app.js";
            import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-auth.js";
            import { getFirestore, collection, addDoc } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-firestore.js";
            // TODO: Add SDKs for Firebase products that you want to use

            // Your web app's Firebase configuration
            const firebaseConfig = {
                // 填入你的Firebase配置信息
            };

            // Initialize Firebase
            const app = initializeApp(firebaseConfig);
            const auth = getAuth();
            const db = getFirestore(app);

            // 绑定按钮点击事件
            document.getElementById('button').addEventListener('click', async () => {
                // 获取提交时的表单数据
                const email = document.getElementById('email').value;
                const password = document.getElementById('password').value;
                const loc = document.getElementById('loc').value;
                const phone_num = document.getElementById('phone_num').value;
                const JMT = document.getElementById('JMT').value.split(",");
                const JMT_map = new Map();
                
                for (let i = 0; i < JMT.length; i++){
                    JMT_map.set(JMT[i], 1)
                }

                try {
                    // 创建用户
                    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
                    const user = userCredential.user;
                    alert("注册成功");

                    // 将用户数据写入Firestore
                    const docRef = await addDoc(collection(db, "users"), {
                        uid: user.uid, // 关联用户ID，便于后续数据关联
                        phone: phone_num,
                        position: loc,
                        JMT: Object.fromEntries(JMT_map) // Firestore不支持Map，转为普通对象存储
                    });
                    console.log("文档写入成功，ID: ", docRef.id);

                    location.replace('./test.html');
                } catch (error) {
                    alert(`注册失败: ${error.message}`);
                    console.error(error);
                }
            });
        </script>
    </body>
</html>

额外说明 #

1. Firestore不支持直接存储Map类型，因此用Object.fromEntries(JMT_map)将其转换为普通对象后再存储
2. 将用户创建和数据写入放在同一个try/catch块中，确保任一环节出错都会终止流程并提示错误，避免只创建用户但未写入数据的情况
3. 存储用户的uid到Firestore，方便后续通过用户ID查询或关联数据

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