Angular 5中Firebase on方法报错：Cannot read property 'singlePost' of null

看起来你遇到的问题核心是**singlePost未初始化导致为null**，再加上回调函数中this上下文可能丢失的问题，才会触发Cannot read property 'singlePost' of null的错误。下面给你一步步解决的方案：

首先要确保singlePost不是null，在组件类里提前给它一个初始值。如果有定义Post接口的话更规范：

// 先定义Post接口（可选，但推荐）
interface Post {
  content: string;
  // 可以添加其他你需要的字段，比如id、title等
}

// 在组件类中初始化
singlePost: Post = { content: '' }; // 给默认空值，避免null

如果没有接口，直接用any类型初始化也可以：

singlePost: any = {};

Firebase的on方法回调默认的this不是组件实例，所以你需要用箭头函数来绑定组件的this，或者用bind(this)。推荐用箭头函数，写法更简洁：

方案一：使用AngularFire的valueChanges()（更符合Angular习惯） #

如果你用的是@angular/fire库，更推荐用它封装的Observable方法，而不是原生Firebase的on：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit, OnDestroy {
  singlePost: Post = { content: '' };
  private postSub: Subscription | null = null;

  constructor(private db: AngularFireDatabase) {}

  ngOnInit() {
    // 替换成你的Firebase数据路径
    const postRef = this.db.object('/posts/your-post-id');
    
    // 用valueChanges订阅数据变化，箭头函数保证this指向组件
    this.postSub = postRef.valueChanges().subscribe(postData => {
      if (postData) { // 先判断数据是否存在，避免赋值undefined
        // 可以直接覆盖整个对象，或者单独赋值content
        this.singlePost = { ...postData };
        // 或者 this.singlePost.content = postData.content;
      }
    });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，防止内存泄漏
    if (this.postSub) {
      this.postSub.unsubscribe();
    }
  }
}

方案二：使用原生Firebase的on方法 #

如果坚持用原生Firebase SDK的on方法，同样要注意this的绑定：

import { Component, OnInit, OnDestroy } from '@angular/core';
import * as firebase from 'firebase/app';
import 'firebase/database';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit, OnDestroy {
  singlePost: Post = { content: '' };
  private postRef: firebase.database.Reference | null = null;

  constructor() {}

  ngOnInit() {
    this.postRef = firebase.database().ref('/posts/your-post-id');
    
    // 用箭头函数绑定this
    this.postRef.on('value', (snapshot) => {
      if (snapshot.exists()) { // 判断数据是否存在
        const postData = snapshot.val();
        this.singlePost = { ...postData };
      }
    }, (error) => {
      console.error('监听数据失败:', error);
    });
  }

  ngOnDestroy() {
    // 组件销毁时取消监听
    if (this.postRef) {
      this.postRef.off('value');
    }
  }
}

在模板里可以用*ngIf确保singlePost有值后再渲染，避免不必要的错误：

<div *ngIf="singlePost">
  <h3>文章内容</h3>
  <p>{{ singlePost.content }}</p>
</div>

• 初始化优先：永远不要让需要绑定的对象为null，提前给初始值是避免这类错误的核心。
• 上下文绑定：箭头函数是确保回调中this指向组件实例的最简单方式，不要用普通函数（除非手动bind）。
• 清理资源：组件销毁时一定要取消订阅/监听，否则会导致内存泄漏，影响应用性能。
• 数据存在判断：Firebase返回的snapshot可能不存在（比如路径错误），所以要先判断snapshot.exists()或者postData是否有值，再赋值。

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