Angular 5生产环境自定义域名下Firebase数据库加载失败报错求助

先理清楚核心问题：你的代码在Firebase默认域名(myproject.firebaseapp.com)能正常运行，但切换到自定义域名后，数据库抛出TypeError: 无法读取未定义属性'myID'，这说明在自定义域名环境下，某个依赖myID的对象没有被正确初始化——而因为域名不同就出问题，大概率和Firebase的域名配置、权限规则，或者生产环境的初始化时序有关。

下面是按优先级排序的排查和修复步骤：

1. 确认自定义域名已在Firebase控制台正确配置 #

这是最常见的坑，Firebase会限制未验证的域名访问数据库：

• 打开Firebase控制台，进入你的项目 → Hosting → 自定义域名，确认你的自定义域名已经完成验证，并且状态是"已部署"
• 同时检查Authentication → 登录方法 → 授权域，把你的自定义域名添加进去（比如your-custom-domain.com，注意不要加http://或https://）

2. 检查Firebase数据库的安全规则 #

如果你的规则依赖请求来源的域名，可能没给自定义域名开权限：

• 进入Firebase控制台 → Realtime Database → 规则，检查是否有类似限定域名的规则，比如：

  {
    "rules": {
      ".read": "auth != null && request.auth.token.email_verified && request.origin === 'https://myproject.firebaseapp.com'",
      ".write": "auth != null && request.auth.token.email_verified && request.origin === 'https://myproject.firebaseapp.com'"
    }
  }
  

  这种情况下要把自定义域名也加进去，改成：

  {
    "rules": {
      ".read": "auth != null && request.auth.token.email_verified && (request.origin === 'https://myproject.firebaseapp.com' || request.origin === 'https://your-custom-domain.com')",
      ".write": "auth != null && request.auth.token.email_verified && (request.origin === 'https://myproject.firebaseapp.com' || request.origin === 'https://your-custom-domain.com')"
    }
  }
  

  注意：如果是临时测试，可以先把规则改成".read": true, ".write": true（仅限测试！上线前一定要改回严格规则），确认是不是规则限制导致的问题。

3. 排查myID的初始化逻辑 #

错误提示是无法读取未定义属性myID，说明你在代码中访问了某个对象的myID属性，但这个对象在自定义域名环境下是undefined。比如：

• 可能是从auth.currentUser中取myID，但在自定义域名下auth状态获取延迟了，导致代码执行时currentUser还没初始化
• 或者是从localStorage/sessionStorage中取的myID，但自定义域名下存储的键名有差异，或者存储的数据丢失

修复建议：

• 确保在访问myID前，先检查对象是否存在：

  // 原来的代码（可能出错）
  const userId = someObject.myID;
  
  // 修改后的代码
  if (someObject && someObject.myID) {
    const userId = someObject.myID;
    // 继续执行数据库操作
  } else {
    // 处理对象未初始化的情况，比如等待auth状态就绪
    console.warn("myID未找到，等待初始化...");
  }
  

• 如果myID来自Firebase Auth，建议用authState observable来监听，而不是直接取currentUser：

  import { AngularFireAuth } from 'angularfire2/auth';
  
  constructor(private afAuth: AngularFireAuth) {}
  
  ngOnInit() {
    this.afAuth.authState.subscribe(user => {
      if (user) {
        // 这里user肯定存在，可以安全访问user.uid（或者你的myID字段）
        const myID = user.uid;
        // 执行数据库查询
        this.db.object(`/users/${myID}`).valueChanges().subscribe(data => {
          // 处理数据
        });
      }
    });
  }
  

4. 清除生产环境的缓存 #

有时候自定义域名的CDN缓存了旧代码，导致新的初始化逻辑没生效：

• 手动清除浏览器缓存（Ctrl+Shift+R 强制刷新）
• 进入Firebase控制台 → Hosting → 部署历史记录，重新部署一次，同时勾选"部署后清除缓存"选项
• 也可以在firebase.json中配置缓存规则，避免关键文件被缓存：

  {
    "hosting": {
      "headers": [
        {
          "source": "**/*.{js,css,html}",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "no-cache, no-store, must-revalidate"
            }
          ]
        }
      ]
    }
  }
  

5. 检查Firebase初始化配置 #

确认生产环境的Firebase配置和开发环境一致：

• 检查你的environment.prod.ts中的Firebase配置，是否和environment.ts一致（特别是databaseURL、authDomain等字段）
• 确保authDomain设置成你的自定义域名，或者包含自定义域名：

  // environment.prod.ts
  export const environment = {
    production: true,
    firebase: {
      apiKey: "YOUR_API_KEY",
      authDomain: "your-custom-domain.com", // 或者"myproject.firebaseapp.com"（两者都能生效，但建议填自定义域名）
      databaseURL: "https://myproject.firebaseio.com",
      projectId: "myproject",
      storageBucket: "myproject.appspot.com",
      messagingSenderId: "YOUR_SENDER_ID"
    }
  };
  

如果以上步骤都试过还是有问题，可以在浏览器控制台中打印出那个未定义的对象，看看在自定义域名下它为什么是undefined——比如在出错的代码前加console.log(someObject)，对比Firebase默认域名和自定义域名下的输出差异，这样能更快定位问题。

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