这个报错的根源很清晰：你在firebase选项里直接使用this.chapterid时，这个选项是在组件实例创建之前就被解析执行的，此时this根本不是你的组件实例，chapterid自然还没被初始化，所以会报未定义的错误。

下面给你两种可行的解决办法，根据你的场景选就行：

方案一：用函数形式定义firebase选项 #

Vuefire支持把firebase写成一个函数，这个函数会在组件实例创建完成后执行，这时this就能正确指向组件实例，访问到data里的属性了：

export default {
  // 改成函数形式，返回firebase配置对象
  firebase() {
    return {
      classlist: db.ref('chapter/' + this.chapterid)
    }
  },
  data() {
    return {
      chapterid: ''
    }
  },
  mounted() {
    this.chapterid = getChapterId()
  },
  // 可选：如果chapterid后续会变化，监听它并更新Firebase引用
  watch: {
    chapterid(newChapterId) {
      if (newChapterId) {
        // 通过$firebaseRefs拿到对应的引用，更新路径
        this.$firebaseRefs.classlist.updateRef(db.ref('chapter/' + newChapterId))
      }
    }
  }
}

方案二：手动调用$bind方法绑定（更灵活） #

如果你想完全控制绑定的时机（比如必须拿到chapterid之后再绑定），可以放弃firebase选项，直接在mounted里用Vuefire提供的$bind方法手动绑定数据：

export default {
  data() {
    return {
      classlist: [], // 先初始化空数组
      chapterid: ''
    }
  },
  mounted() {
    this.chapterid = getChapterId()
    // 手动把Firebase路径绑定到classlist属性上
    this.$bind('classlist', db.ref('chapter/' + this.chapterid))
  },
  beforeDestroy() {
    // 组件销毁时记得解绑，避免内存泄漏
    this.$unbind('classlist')
  }
}

这种方式的好处是不会出现初始时chapterid为空导致的无效绑定，完全由你控制绑定时机，适合需要异步获取参数的场景。

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