Cannot read proprty uid of null firebase

Question

I'm trying to store data in firebase, userId under a list. Its working but I'm receiving this error: typeerror cannot read property 'uid' of null at service.ts, I'm new to this Need help.

Uid is used here, removing it makes the userid undefined on firebase while using it gives this error. If I ignore the error and use to add item, its working just fine but the error is not going away.

private categoriesListRef = this.db.list(categories-list/${this.currentUser.uid})

service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Item } from '../models/item.model';
import * as firebase from 'firebase';

@Injectable()
export class CategoriesListService {

currentUser = firebase.auth().currentUser;

private categoriesListRef = this.db.list<Item>(`categories-list/${this.currentUser.uid}`)

constructor(private db: AngularFireDatabase) {
}

getCategoriesList() {
    return this.categoriesListRef;
}

addItem(item: Item) {
    return this.categoriesListRef.push(item);
}

editItem(item: Item) {
    return this.categoriesListRef.update(item.key, item);
}

removeItem(item: Item) {
    return this.categoriesListRef.remove(item.key);
}
}

home.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { CategoriesListService } from '../../services/categories-list.service';
import { Observable } from 'rxjs/Observable';
import { Item } from './../../models/item.model';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {

categoriesList$: Observable<Item[]>

constructor(public navCtrl: NavController, public navParams: NavParams, private categories: CategoriesListService) {
this.categoriesList$ = this.categories
    .getCategoriesList() //DB List
    .snapshotChanges() // Key & Value
    .map(changes => {
        return changes.map(c => ({
            key: c.payload.key,
            ...c.payload.val()
        }));
    });
}


ionViewDidLoad() {
  console.log('ionViewDidLoad HomePage');
}

}

Answer 1

The simple answer seems to be, that your currentUser is (still) null. Here are the official docs to this.

Your service presupposes the existence of a logged in user, but does not check whether this assumption is true before processing the user-object. I reckon the user is not yet completely placed/created inside firebase when your service already tries to get it. Race conditions.

currentUser = firebase.auth().currentUser; // no validation whether the user exists.

You should better try it this way.

Your Service

@Injectable()
export class CategoriesListService {

currentUser: any;
private categoriesListRef: any;

constructor(private db: AngularFireDatabase) {

    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        this.currentUser = user;
        categoriesListRef = this.db.list<Item>(`categories-list/${this.currentUser.uid}`)
      } else {
        // No user is signed in.
      }
    });

}

...  The rest of your code

Your home.ts

constructor(public navCtrl: NavController, public navParams: NavParams, private categories: CategoriesListService) {
    if(this.categories.getCategoriesList()) {
        this.categoriesList$ = this.categories
            .getCategoriesList() //DB List
            .snapshotChanges() // Key & Value
            .map(changes => {
                return changes.map(c => ({
                    key: c.payload.key,
                    ...c.payload.val()
                }));
            });
    }
}

This way you can make sure that the user exists. And only then the process gets started. Otherwise the system does nothing. This is maybe not exactly what fits to your needs in detail, but it should give you the right hint to find your final solution.