Google Firebase Angular Firestore switchMap - Firebase Error DocumentReference.set()

Question

I'm trying to setup an Angular Firebase app where the user data that I want to share with the App is stored in the Firestore Database. I'm getting the following error:

ERROR Error: Uncaught (in promise): FirebaseError: [code=invalid-argument]: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field role)

My data is setup as follows:

My user service is setup like this: auth.service.ts

import { Injectable } from "@angular/core";
import { Router } from '@angular/router';

import { auth } from 'firebase/app';
import {
    AngularFirestore,
    AngularFirestoreDocument
} from '@angular/fire/firestore'

import { Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { User } from './user.model';

import * as firebase from 'firebase';
import { AngularFireAuth } from '@angular/fire/auth';
import { faGameConsoleHandheld } from '@fortawesome/pro-light-svg-icons';

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

  user$: Observable<User>;

  constructor(private afAuth: AngularFireAuth,
              private afs: AngularFirestore,
              private router: Router) {
        //This is how we're getting into the firestoreDB        
        this.user$ = this.afAuth.authState.pipe(
          switchMap(user => {
            if (user){
              console.log("user from constructor", user)
              return this.afs.doc<User>(`users/${user.uid}`).valueChanges();
            } else {
                console.log("returning null")
                return of(null)
            }
          })
        )
              } //end constructor

  private updateUserData(user){
    //sets user data to firestore on login
    const userRef: AngularFirestoreDocument<User> = this.afs.doc(`users/${user.uid}`)
    console.log("userRef", userRef)
    const data = {
      uid: user.uid,
      email: user.email,
      displayName: user.displayName,
      role: user.role,
      thursdayCampaign: user.thursdayCampaign,
      menagerieCoast: user.menagerieCoast
    }
    console.log("role:", user.thursdayCampaign)
    return userRef.set(data, { merge: true})
  }

  async emailSignin(value){
    const provider = new firebase.auth.EmailAuthProvider();
    const credential = await this.afAuth.signInWithEmailAndPassword(value.email, value.password)
    return this.updateUserData(credential.user)
  }

user.model.ts:

export interface User {
  uid: string;
  email: string;
  displayName?: string;
  role: string;
  thursdayCampaign: Boolean;
  menagerieCoast: Boolean;

}

I've narrowed down the problem that is creating the error, the app is returning null from this.user$ in the constructor, but i'm not sure why it's doing that. I thought that setting AngularFirestoreDocument would cause it to access that property but it is not. You can see I have some console log functions sprinkled throughout the code. The "returning null" is getting returned when I run my function,

Doug Stevenson Doug Stevenson · Accepted Answer · 2020-05-03T21:15:47

The error message (emphasis mine):

Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field role)

is telling you that you passed an undefined value for the role field. That means you have an undefined value in user.role. We can't see why that is here, so you'll have to debug it by finding out where that user object comes from.

Google Firebase Angular Firestore switchMap - Firebase Error DocumentReference.set()

1 Answers