求助：Ionic 6对接Firebase实时数据库报TypeError无法转换空值为对象问题

我是Ionic开发新手，在开发离线模式功能、对接Firebase API时遇到运行时报错：ERROR TypeError: Cannot convert undefined or null to object。
当前现象：数据来源为Firebase实时数据库，接口返回内容仅能在浏览器网络请求面板中正常查看，无法被页面正常解析渲染。现将用到的核心代码段贴出，恳请帮忙排查代码问题。

核心代码段 #

1. home.page.html #

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Offline Mode
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="loadData(true, $event)">
    <ion-refresher-content>
    </ion-refresher-content>
  </ion-refresher>
 
  <ion-list>
    <ion-item *ngFor="let user of users" tappable (click)="updateUser(user.id)">
      <ion-thumbnail slot="start">
        <img [src]="user.avatar">
      </ion-thumbnail>
      <ion-label>
        <h3>{{ user.first_name }} {{ user.last_name }}</h3>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

2. home.page.ts #

import { Platform } from '@ionic/angular';
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../services/api.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
 
  users:any[]=[];
 
  constructor(private apiService: ApiService, private plt: Platform) { }
 
  ngOnInit() {
    this.plt.ready().then(() => {
      this.loadData(true);
    });
  }
 
  loadData(refresh = false, refresher?) {
    this.apiService.getUsers(refresh).subscribe(res => {
      this.users = Object.values(res);
      if (refresher) {
        refresher.target.complete();
      }
    });
  }
 
  updateUser(id) {
    this.apiService.updateUser(id, {name: 'Victor', job: 'CEO'}).subscribe();
  }
  
}

3. api.service.ts #

import { OfflineManagerService } from './offline-manager.service';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { NetworkService, ConnectionStatus } from './network.service';
import { Storage } from '@ionic/storage';
import { Observable, from } from 'rxjs';
import { tap, map, catchError } from "rxjs/operators";

const API_STORAGE_KEY = 'specialkey';
const API_URL = 'https://food-ea070-default-rtdb.firebaseio.com';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient, private networkService: NetworkService, private storage: Storage, private offlineManager: OfflineManagerService) { }
 
  getUsers(forceRefresh: boolean = false): Observable<any[]> {
    if (this.networkService.getCurrentNetworkStatus() == ConnectionStatus.Offline || !forceRefresh) {
      // 从Storage读取本地缓存数据返回
      return from(this.getLocalData('users'));
    } else {
      // 拉取真实接口数据并存入本地缓存
      return this.http.get(`${API_URL}/users.json`).pipe(
        map(res => res['data']),
        tap(res => {
          this.setLocalData('users', res);
        })
      )
    }
  }
 
  updateUser(_user, data): Observable<any> {
    let url = `${API_URL}/users.json`;
    if (this.networkService.getCurrentNetworkStatus() == ConnectionStatus.Offline) {
      return from(this.offlineManager.storeRequest(url, 'PUT', data));
    } else {
      return this.http.put(url, data).pipe(
        catchError(err => {
          this.offlineManager.storeRequest(url, 'PUT', data);
          throw new Error(err);
        })
      );
    }
  }
 
  // 保存接口请求结果到本地
  private setLocalData(key, data) {
    this.storage.set(`${API_STORAGE_KEY}-${key}`, data);
  }
 
  // 从本地读取缓存的接口结果
  private getLocalData(key) {
    return this.storage.get(`${API_STORAGE_KEY}-${key}`);
  }
  
}

配套材料 #

• 共附3张与报错场景相关的截图

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