Firebase调用firebase.app()报reading 'city'属性undefined错误

Uncaught TypeError: Cannot read properties of undefined (reading 'city')

尝试在控制台打印Firebase App实例时运行抛出大量报错，累计排查3小时未定位根因，参考Youtube平台相关教学视频也未找到有效解决方案，需要协助修复该错误。

涉及代码如下：

业务脚本（app.js） #

document.addEventListener("DOMContentLoaded", event => {
    
    const app = firebase.app();

    console.log(app)

}); 

页面HTML代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome to Firebase Hosting</title>

    <!-- update the version number as needed -->
    <script defer src="/__/firebase/9.8.3/firebase-app-compat.js"></script>
    <!-- include only the Firebase features as you need -->
    <script defer src="/__/firebase/9.8.3/firebase-auth-compat.js"></script>
    <script defer src="/__/firebase/9.8.3/firebase-database-compat.js"></script>
    <script defer src="/__/firebase/9.8.3/firebase-firestore-compat.js"></script>
    <script defer src="/__/firebase/9.8.3/firebase-functions-compat.js"></script>
    <script defer src="/__/firebase/9.8.3/firebase-messaging-compat.js"></script>
    <script defer src="/__/firebase/9.8.3/firebase-storage-compat.js"></script>
    <script defer src="/__/firebase/9.8.3/firebase-analytics-compat.js"></script>
    <script defer src="/__/firebase/9.8.3/firebase-remote-config-compat.js"></script>
    <script defer src="/__/firebase/9.8.3/firebase-performance-compat.js"></script>
    <!-- 
      initialize the SDK after all desired features are loaded, set useEmulator to false
      to avoid connecting the SDK to running emulators.
    -->
    <script defer src="/__/firebase/init.js?useEmulator=true"></script>

  </head>
  <body> 

    <button onclick="googleLog()">Login with google</button>


    <script src="app.js"></script>

  </body>
</html>

• 所有Firebase SDK脚本、自动初始化脚本init.js都添加了defer属性，自定义的app.js未加该属性，脚本执行顺序存在不可控风险，可能出现Firebase未完成初始化就执行业务逻辑的情况
• 路径以/__/firebase/开头的资源是Firebase Hosting动态注入的专属资源，仅通过firebase serve启动本地托管服务、或部署到Firebase Hosting后通过托管域名访问才能正常加载。如果直接用file://协议双击打开HTML、或用非Firebase的静态服务器启动项目，会导致Firebase SDK、初始化脚本加载失败，配置对象缺失，调用实例方法时读取未定义配置项的city字段就会抛出类型错误
• 初始化参数配置了useEmulator=true，如果本地未启动对应Firebase模拟器服务，初始化流程读取模拟器地域配置时也会触发同类报错

1. 调整脚本加载属性，给自定义app.js的引入标签添加defer，保证所有脚本按书写顺序执行，避免加载时序问题

   <!-- 替换原有app.js引入标签 -->
   <script defer src="app.js"></script>
   

2. 修正访问方式：不要直接打开本地HTML文件，在项目根目录执行firebase serve启动本地托管服务，通过输出的localhost地址访问页面。如果不需要连接本地模拟器，将init.js的请求参数改为useEmulator=false
3. 增加初始化状态判断，避免未就绪时调用Firebase实例，修改app.js逻辑如下：

   document.addEventListener("DOMContentLoaded", event => {
       const timer = setInterval(() => {
           if (window.firebase && firebase.apps.length) {
               clearInterval(timer)
               const app = firebase.app();
               console.log(app)
           }
       }, 100)
   });
   

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