Vue.js Firebase对象绑定遇UID为空：如何用onAuthStateChanged解决？

你遇到的「UID Of Null」错误，核心原因是代码执行时机的差异：

• 组件中firebase选项里的db.ref(auth.currentUser.uid)是在组件初始化阶段就被执行的。Firebase的用户认证状态是异步恢复的——哪怕用户之前已经登录过，页面刷新后Firebase需要一点时间从本地缓存或服务器获取会话信息，这时候auth.currentUser还没被赋值，自然就是null。
• 而按钮的test方法是在用户点击时触发的，这时候用户已经完成登录流程，auth.currentUser已经有了有效值，所以能正常打印uid。
• 云函数里的onAuthStateChanged是监听认证状态变化的回调，只有当用户状态确定（登录成功）时才会触发，所以也能拿到正确的uid。

根据你的业务场景，这里有两种可靠的解决方式：

方案一：使用Vuefire的函数式绑定（推荐） #

Vuefire支持用函数来返回数据库引用，这个函数会在组件准备绑定数据时才执行——这时候你的路由守卫已经确保用户处于登录状态，auth.currentUser肯定有值：

firebase: {
  tableTennisData: () => db.ref(auth.currentUser.uid).child('tableTennis'),
}

这种写法最简洁，完全适配你现有的Vue Router登录验证逻辑。

方案二：手动在组件生命周期中绑定（更灵活） #

如果需要处理更复杂的场景（比如用户登出后解绑数据），可以在组件的created钩子中通过onAuthStateChanged监听，并使用Vuefire的$bind方法手动绑定数据：

data() {
  return {
    tableTennisData: null
  }
},
created() {
  auth.onAuthStateChanged(user => {
    if (user) {
      const dataRef = db.ref(user.uid).child('tableTennis')
      // 调用Vuefire的$bind方法，将数据绑定到组件的tableTennisData属性
      this.$bind('tableTennisData', dataRef)
    } else {
      // 用户登出时可以清空数据或解绑
      this.tableTennisData = null
    }
  })
}

你的Vue Router路由守卫已经做了很好的控制：只有登录用户才能进入需要认证的页面。这意味着当渲染包含上述代码的组件时，用户肯定处于登录状态，不会出现auth.currentUser为null的情况，两种方案都能稳定运行。

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