Angular+Firebase生产环境登录触发myID未定义错误求助

问题分析 #

你遇到的这个情况很典型：开发环境完全正常，但用ng build --prod构建部署到Firebase Hosting后，部分用户登录时触发了Firebase Database的警告，错误指向一个你从未定义过的myID属性。结合你提供的压缩代码片段和依赖版本来看，核心原因大概率是生产构建的混淆压缩破坏了this上下文绑定，或是AngularFire2与Firebase SDK的版本兼容性bug导致的。

分步解决方案 #

1. 验证是否是构建混淆导致的问题

首先我们可以临时关闭生产构建的优化，确认问题根源：

ng build --prod --optimization=false

把构建后的代码部署到Firebase测试，如果错误消失，说明就是混淆压缩工具（Terser）的问题。此时可以修改Angular构建配置，避免混淆破坏this的正确绑定：

• 打开项目根目录的.angular-cli.json（Angular 5使用该配置文件）
• 在defaults.build节点下添加terserOptions配置：

"defaults": {
  "build": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "terserOptions": {
      "keep_fnames": true
    }
  }
}

重新执行ng build --prod并部署，这个配置会保留函数名和this的正确绑定，避免混淆导致的上下文丢失。

2. 升级AngularFire2与Firebase SDK版本

你当前使用的angularfire2: ^5.0.0-rc.7和firebase: ^4.13.1是候选版本，存在已知的生产构建兼容性问题。建议升级到Angular 5兼容的稳定版本：
修改package.json中的依赖：

"dependencies": {
  // ...其他依赖
  "angularfire2": "^5.0.0",
  "firebase": "^4.13.3"
}

执行npm install更新依赖后，重新构建部署，新版本修复了不少生产环境的bug。

3. 排查Firebase回调的this绑定问题

虽然你的AuthService里没有直接操作Firebase Database，但登录后UserService可能存在数据库操作回调。检查所有Firebase相关的回调函数，确保使用箭头函数保留this上下文，避免普通函数导致的this指向错误：

// 错误写法：普通函数会丢失this上下文
this.userService.get(user.uid).subscribe(function(snapshot) {
  // 这里的this可能指向全局对象或undefined
});

// 正确写法：箭头函数保留当前上下文
this.userService.get(user.uid).subscribe((snapshot) => {
  // 逻辑代码
});

4. 排除浏览器扩展干扰

部分用户的错误可能来自浏览器扩展（如广告拦截、脚本注入类工具），这些扩展可能会注入包含myID的代码干扰应用。建议用户尝试在隐身模式下访问应用，如果错误消失，说明是扩展的问题，引导用户禁用相关扩展即可。

总结 #

最可能快速解决问题的步骤是先升级依赖版本，再调整构建的混淆配置。如果还是无法解决，检查所有Firebase回调的this绑定方式，或是排除浏览器扩展的影响。

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