点击注册按钮无法将用户注册信息存入FireStore的解决方法

我帮你排查出了几个关键问题，这些都会导致数据无法成功存入FireStore，咱们逐个修复：

1. 按钮ID错误（最关键！） #

你的HTML里注册按钮的ID写了id="submit,"（多了个逗号），但JS里用document.querySelector("#submit")去获取，根本找不到这个按钮，所以点击事件完全没绑定上！先把HTML里的按钮ID改对：

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

2. 输入值获取时机错误 #

你现在是页面一加载就获取输入框的值，这时候用户还没填写任何内容，所以点击按钮时用的都是空值。必须把获取值的代码放到点击事件的回调函数里，这样才能拿到用户填写的最新内容。

3. 阻止表单默认提交行为 #

表单的submit按钮点击后会默认跳转页面，FireStore的存数据操作是异步的，页面一跳转，操作就中断了，数据自然存不进去。可以把按钮改成button类型（避免表单默认行为干扰），或者在事件里阻止默认跳转。

4. 变量名拼写错误 #

JS里的laseName是拼写错误，应该改成lastName，不然FireStore里的字段名会出错。

5. 统一Firebase SDK版本 #

你页面里加载了不同版本的Firebase SDK（4.6.2、4.8.1），版本不一致可能导致兼容性问题，建议统一用同一个版本。

修正后的完整代码 #

HTML部分（主要改按钮和表单）

<!doctype html>
<html lang="en">
<head>
    <title> deyaPay</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 统一用4.8.1版本的SDK -->
    <script src="https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.8.1/firebase-firestore.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <h1 style="text-align:center;"> Welcome to Signup page</h1>
    <!-- 去掉action和method，改用JS控制跳转时机 -->
    <form style="text-align:center">
        <div class="form-group">
            <label> FirstName</label>
            <input type="text" id="firstname"></br>
            <label> Lastname</label>
            <input type="text" id="lastname"></br>
            <label> Email </label>
            <input type="email" id="email"></br>
            <label> Password </label>
            <input type="password" id="pass"></br>
            <label>Phonenumber</label>
            <input type="text" id="phone"></br>
            <div class="form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="checkbox"> Remember me
                </label>
            </div>
            <!-- 改成button类型，避免表单默认提交 -->
            <button type="button" value="Register" id="submit">Register</button>
            <a href="login.html">already registered?</a>
        </div>
    </form>
    <script type ="text/javascript">
        function myValidation() {
            var firestname=document.getElementById("firstname").value;
            var lastname=document.getElementById("lastname").value;
            var email=document.getElementById("email").value;
            var pswd=document.getElementById("pass").value;
            var phone=document.getElementById("phone").value;
            if((firestname=='')&&(lastname=='')){
                alert("enter firstname and lastname");
                return false;
            }
            if(email==''){
                alert("enter email");
                return false;
            }
            if((pswd=='')||(pswd.length<9)){
                alert("enter password and password must contain 9 characters");
                return false;
            }
            if((phone=='')||(phone.length>10)||(phone.length<10)){
                alert("phonenumber must contain 10 numbers.");
                return false;
            }
            return true;
        }
    </script>
    <script type ="text/javascript" src = "./app.js"></script>
</body>
</html>

JS部分（app.js）

var config = { 
    apiKey: "AIzaSyAJsAstiMsrB2QGJyoqiTELw0vsWFVVahw", 
    authDomain: "websignin-79fec.firebaseapp.com", 
    databaseURL: "https://websignin-79fec.firebaseio.com", 
    projectId: "websignin-79fec", 
    storageBucket: "", 
    messagingSenderId: "480214472501" 
}; 
firebase.initializeApp(config); 
var db=firebase.firestore(); 

const save=document.querySelector("#submit"); 
save.addEventListener("click",function() { 
    // 先执行表单验证，不通过就终止操作
    if(!myValidation()) return;
    
    // 点击按钮时才获取用户输入的值
    const inputTextfield = document.querySelector("#firstname").value;
    const lastname = document.querySelector("#lastname").value;
    const email = document.querySelector("#email").value;
    const phonenumber = document.querySelector("#phone").value;

    db.collection("deyaPayusers").add({ 
        Name: inputTextfield,
        Email: email,
        PhoneNo: phonenumber,
        lastName: lastname, // 修正拼写错误
    }).then(function(docRef) { 
        console.log("Document successfully written! Document ID: ", docRef.id);
        // 数据存储成功后再跳转到首页
        window.location.href = "home.html";
    }) 
    .catch(function(error) { 
        console.error("Error writing document: ", error); 
    }); 
});

这样修改后，点击注册按钮会先执行表单验证，验证通过后再获取用户输入的值存入FireStore，成功后再跳转到首页，就能解决数据无法存储的问题了。

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