Firebase Hosting本地SDK无法调用，CDN版本正常问题求助

我来帮你分析一下问题所在，你遇到的Uncaught ReferenceError: firebase is not defined错误，核心原因是脚本加载顺序的问题，和Firebase Hosting自带SDK与CDN版本的工作方式无关——两者的功能是完全一致的，只是加载路径不同。

问题根源 #

你给所有Firebase相关的脚本都加了defer属性，这个属性的作用是让脚本在文档解析完成后、DOMContentLoaded事件触发前按顺序加载执行。但你的测试脚本没有加defer，它会在文档解析到它的时候立即执行，这时候Firebase的SDK和初始化脚本还没加载完成，自然找不到firebase对象。

而CDN版本的SDK你可能没加defer（或者加载速度刚好赶上），所以测试代码能正常运行。

解决方案 #

这里有几个可靠的解决方法，任选其一即可：

1. 给测试脚本也添加defer属性

把你的测试脚本改成这样，让它和Firebase脚本一起按顺序延迟执行：

<script defer>
  firebase.database().ref('events').on('value',function(snapshot){
    var result=snapshot.val();
    result=JSON.stringify(result);
    document.getElementById("data").innerHTML=result;
  });
</script>

注意：添加defer后，脚本的执行顺序会严格按照它们在HTML中的出现顺序，所以要确保测试脚本放在所有Firebase脚本的后面。

2. 把代码包裹在DOMContentLoaded事件监听里

通过监听DOM加载完成事件，确保代码在所有defer脚本执行后再运行：

<script>
  document.addEventListener('DOMContentLoaded', function() {
    firebase.database().ref('events').on('value',function(snapshot){
      var result=snapshot.val();
      result=JSON.stringify(result);
      document.getElementById("data").innerHTML=result;
    });
  });
</script>

3. 使用Firebase初始化完成的检测逻辑

如果你想更稳妥，还可以通过轮询检测Firebase是否初始化完成：

<script>
  function initFirebaseLogic() {
    if (typeof firebase !== 'undefined' && firebase.apps.length > 0) {
      // 执行你的业务代码
      firebase.database().ref('events').on('value',function(snapshot){
        var result=snapshot.val();
        result=JSON.stringify(result);
        document.getElementById("data").innerHTML=result;
      });
    } else {
      // 等待100ms后再次检测
      setTimeout(initFirebaseLogic, 100);
    }
  }
  initFirebaseLogic();
</script>

补充说明 #

Firebase Hosting提供的内置SDK和CDN版本在功能上没有区别，只是内置SDK部署在你的Hosting域名下，加载速度可能更快，且不需要依赖第三方CDN的可用性。只要解决了脚本加载顺序的问题，就能正常使用。

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