trying to update field in cloud firestore

Question

I'm very new to Firebase/Firestore.

I created a function modifyRole that takes two parameters, uid and role, and should update my database by changing the role, which the user selects from a dropdown.

But I'm getting an error, as follows:

ERROR Error: Uncaught (in promise): FirebaseError: [code=not-found]: No document to update: projects/headstart-imm/databases/(default)/documents/users/role

Error: No document to update: projects/headstart-imm/databases/(default)/documents/users/role.

Here is my code:

import { animate, state, style, transition, trigger } from '@angular/animations';
import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { tap } from 'rxjs/operators';
import { fuseAnimations } from '../../../@fuse/animations';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  animations: [
    fuseAnimations,
    trigger('detailExpand', [
      state('void', style({ height: '0px', minHeight: '0', visibility: 'hidden' })),
      state('*', style({ height: '*', visibility: 'visible' })),
      transition('void <=> *', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
})
export class UsersComponent implements OnInit {
  userColumns = ['photoURL', 'name', 'email', 'providerId', 'role'];

  users$ = this.afs.collection<Users[]>('users').valueChanges().pipe(tap(console.log));

  constructor(private afs: AngularFirestore) {}

  ngOnInit(): void {}

  modifyRole(uid: string | any, role: string) {
    return this.afs.collection('users').doc('role').update({
      role,
      uid,
    });
  }
}

export interface Users {
  displayName: string;
  email: string;
  phoneNumber: null;
  photoURL: string;
  providerId: string;
  role: string;
  uid: string;
}

this is the template

<mat-table #table *ngIf="users$ | async as users" [dataSource]="users" multiTemplateDataRows=true>
  < id="users-project" class="page-layout simple right-sidebar" fxLayout="row" fxLayoutAlign="space-around center">
    <ng-container matColumnDef="photoURL">
      <mat-header-cell *matHeaderCellDef></mat-header-cell>
      <mat-cell *matCellDef="let user"><div *ngIf="user?.photoURL">
        <img alt="profilePic" src="{{user?.photoURL}}"></div></mat-cell>
    </ng-container>
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
      <mat-cell *matCellDef="let user">{{user?.displayName}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef>Email Address</mat-header-cell>
      <mat-cell *matCellDef="let user">{{user?.email}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="providerId">
      <mat-header-cell *matHeaderCellDef>Provider</mat-header-cell>
      <mat-cell *matCellDef="let user">{{user?.providerId}}</mat-cell>
    </ng-container>
<!--    <ng-container matColumnDef="role">-->
<!--      <mat-header-cell *matHeaderCellDef>Role</mat-header-cell>-->
<!--      <mat-cell *matCellDef="let user"><p>{{user?.role}}</p></mat-cell>-->
<!--    </ng-container>-->
    <ng-container matColumnDef="role">
      <mat-header-cell *matHeaderCellDef>Role</mat-header-cell>
        <mat-cell *matCellDef="let user">
          <mat-form-field>
            <mat-select (selectionChange)="modifyRole(user.uid, user.role)" name="modifyRole">
              <mat-option *ngFor="let user of users"
                      [value]=user.role>{{user.role}}</mat-option>
            </mat-select>
          </mat-form-field>
        </mat-cell>
    </ng-container>
    <ng-template #tpl let-user>
      <div class="mat-row detail-row" [@detailExpand] style="overflow: hidden"></div>
    </ng-template>
    <mat-header-row *matHeaderRowDef="userColumns; sticky: true"></mat-header-row>
    <mat-row *matRowDef="let row; columns: userColumns;" matRipple class="element-row"
             [cdkDetailRow]="row" [cdkDetailRowTpl]="tpl"></mat-row>
</mat-table>

are you sure your doc path is correct? if possible, could you share your firestore structure? — Muthu Thavamani

Muthu Thavamani Muthu Thavamani · Accepted Answer · 2021-02-04T03:04:28

We need valid DocumentReference in hand before performing any action on firestore document. While comparing your firestore stucture and code, as suspected the document path is wrongly set.

this.afs.collection('users').doc('role').update({})

In your users collection, there is no document persisted with id role. To resolve the error, you must provide valid ID like v2fPR.....g1 (unable to grab full id from image)

this.afs.collection('users').doc('v2fPR.....g1').update({})

trying to update field in cloud firestore

1 Answers