无法将联系表单数据存入Firebase及Firebase重复加载警告问题求助

看起来你遇到了两个核心问题：Firebase重复加载的警告，以及表单提交后数据无法存入Firestore。我来一步步帮你解决：

一、解决Firebase重复加载的警告 #

这个警告Firebase is already defined in the global scope说明你的页面里重复引入了Firebase SDK，比如同时用了CDN链接和本地脚本，或者多次添加了同一个Firebase的<script>标签。

解决方法：

• 打开你的HTML文件，找到所有引入Firebase的代码，只保留一套完整的SDK引入（比如firebase-app.js和firebase-firestore.js），删除其他重复的标签。示例：

  <!-- 只保留这一组Firebase引入，删掉其他重复的 -->
  <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-firestore.js"></script>
  

• 另外，初始化Firebase时也要避免重复初始化，建议加个判断：

  var firebaseConfig = {
    // 替换成你从Firebase控制台获取的配置信息
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
  };
  // 确保只初始化一次Firebase
  if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
  }
  

二、解决表单数据无法存入Firestore的问题 #

看你的代码，有两个关键错误导致数据没被保存：

1. 表单提交后没有调用保存函数 #

在submitForm函数里，你获取了所有表单值，但漏掉了调用saveMessage的逻辑，所以表单只是阻止了默认跳转，根本没执行保存操作。修正后的submitForm：

function submitForm(e){
  e.preventDefault();
  // 获取表单值
  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);
  
  // 可选：提交后重置表单
  document.getElementById('bookingForm').reset();
}

2. 保存函数里的变量名错误 #

你前面定义的集合引用是messagesRef，但在saveMessage里写成了messageRef（少了个s），导致找不到这个引用。修正后的saveMessage：

function saveMessage(email, packageFields, name, phone, date) {
  messagesRef.add({ // 这里把messageRef改成messagesRef
    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);
  });
}

额外检查：Firestore安全规则 #

如果以上都改了还是存不进去，要检查你的Firestore安全规则是否允许写入。测试期间可以临时设置宽松规则（上线后一定要改严格）：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.time < timestamp.date(2024, 12, 31);
    }
  }
}

按照上面的步骤修改后，应该就能解决你的问题了！

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