使用Firestore存储表单数据时messageRef未定义错误的解决方法

嘿，这个问题其实就是个拼写小失误！你仔细看一下代码：

你在开头已经正确定义了集合引用变量：

var messagesRef = firestore.collection("BookingData");

但在saveMessage函数里调用添加文档的方法时，却写成了messageRef.add(...)——注意这里少了个末尾的s，JavaScript找不到这个未定义的messageRef变量，自然就抛出ReferenceError了。

修正步骤 #

只需要把saveMessage函数里的messageRef改成和开头一致的messagesRef就行，变量名必须完全匹配（包括单复数、大小写）。

修正后的完整代码 #

var firestore = firebase.firestore();
var messagesRef = firestore.collection("BookingData");
//listen for submit
document.getElementById('bookingForm').addEventListener('submit',submitForm);
function submitForm(e){
 e.preventDefault();
 //get values
 var email = getInputVal('email');
 var packageFields = getInputVal('packageFields');
 var name = getInputVal('name');
 var phone = getInputVal('phone');
 var date = getInputVal('date');
 saveMessage(email, packageFields, name, phone, date);
}
// function to get form values
function getInputVal(id) {
 return document.getElementById(id).value;
}
//save messages
function saveMessage(email, packageFields, name, phone, date) {
 messagesRef.add({
 email:email,
 packageFields:packageFields,
 name:name,
 phone:phone,
 date:date
 }).then(function(docRef) {
 console.log("Document written with ID: ", docRef.id);
 })
 .catch(function(error) {
 console.error("Error adding document: ", error);
 });
}

小提示 #

以后遇到ReferenceError: XXX is not defined这类错误，第一时间检查变量名的拼写是否和定义时完全一致，单复数、大小写这些细节很容易被忽略哦~

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