动态加载Firebase SDK导致数据库引用失效问题咨询

你的问题核心在于动态插入Firebase SDK时的异步加载特性，以及用innerHTML插入脚本的方式存在执行时机和解析上的问题，导致表单提交代码执行时firebase对象还未被正确初始化。

为什么原来的方法失效？ #

• 异步加载未等待：通过innerHTML添加的脚本标签是异步加载的，但你的初始化代码和表单提交代码是同步执行的——这时候Firebase SDK还没加载完成，firebase对象自然不存在，调用firebase.database()就会报错。
• innerHTML插入脚本的局限性：浏览器对通过innerHTML插入的<script>标签处理很严格，尤其是你用了转义的<和>，这会导致脚本内容无法被正确解析为可执行的JS代码，只是作为文本节点存在。

正确的动态加载方案 #

我们需要用原生JS的createElement创建脚本标签，逐个加载Firebase SDK文件，并且在所有脚本加载完成后再初始化Firebase、绑定表单提交事件。这样能确保所有依赖都准备就绪后，再执行相关代码。

修改后的代码示例：

document.body.onload = function() {
  // 定义需要加载的Firebase SDK脚本列表
  const firebaseScripts = [
    "https://www.gstatic.com/firebasejs/7.14.3/firebase-app.js",
    "https://www.gstatic.com/firebasejs/7.14.3/firebase-auth.js",
    "https://www.gstatic.com/firebasejs/7.14.3/firebase-database.js",
    "https://www.gstatic.com/firebasejs/7.14.3/firebase-storage.js",
    "https://www.gstatic.com/firebasejs/7.14.3/firebase-analytics.js"
  ];

  let loadedCount = 0;

  // 加载单个脚本的函数
  function loadScript(src) {
    const script = document.createElement('script');
    script.src = src;
    script.onload = function() {
      loadedCount++;
      // 所有脚本加载完成后初始化Firebase
      if (loadedCount === firebaseScripts.length) {
        initFirebase();
      }
    };
    document.head.appendChild(script);
  }

  // 初始化Firebase并绑定表单事件
  function initFirebase() {
    const firebaseConfig = {
      apiKey: "??",
      authDomain: "??-fb.firebaseapp.com",
      databaseURL: "https://??-fb.firebaseio.com",
      projectId: "??-fb",
      storageBucket: "??.appspot.com",
      messagingSenderId: "??",
      appId: "??",
      measurementId: "G-??"
    };

    firebase.initializeApp(firebaseConfig);
    firebase.analytics();

    // 在这里绑定表单提交逻辑，确保firebase已初始化
    const submittedWords = firebase.database().ref('add_words');
    
    window.submitWords = function() {
      const word = document.getElementById('word').value;
      const lang = document.getElementById('lang').value;
      saveWords(word, lang);
      alert('word has been sent');

      function saveWords(word, lang) {
        const newMessageRef = submittedWords.push();
        newMessageRef.set({
          word: word,
          lang: lang,
        });
      }
    };
  }

  // 开始加载所有Firebase脚本
  firebaseScripts.forEach(scriptSrc => loadScript(scriptSrc));
};

关键改进点： #

• 逐个加载并等待完成：通过onload事件监听每个脚本的加载状态，只有所有SDK脚本都加载完成后才初始化Firebase。
• 避免innerHTML：用createElement创建的脚本标签能被浏览器正确解析和执行，不会出现转义或解析问题。
• 延迟表单逻辑绑定：把表单提交的函数定义放在initFirebase里，确保firebase对象已经存在，不会出现未定义的错误。

这样调整后，动态加载的Firebase SDK就能正常工作，表单提交也能正确写入实时数据库了。

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