Angular / Firestore - 'Where' query returning error 'property does not exist on type AngularFirestoreCollection'

Question

I'm trying to get a specific document from a firestore collection based upon an URL parameter that is passed into the argument, but as I've initialized the collection using expensesCollection: AngularFirestoreCollection<Expense>, the where query is returning the following error:

TS2339: Property 'where' does not exist on type 'AngularFirestoreCollection

The 'ViewExpense' component is accessed after clicking on a datatable row on the 'ExpensesList' component, which passes the expense ID as a parameter, which is used in the where query.

-

expense-list.component.html:

<mat-row *matRowDef="let row; columns: tableColumns" routerLink="/expenses/view/{{row.expenseId}}"></mat-row>

-

view-expense.component.ts:

import { Component, OnInit, Input } from '@angular/core';

import { ActivatedRoute } from '@angular/router';

import { Observable } from 'rxjs/Observable';

import { AngularFireDatabase } from 'angularfire2/database';

import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';

import { Expense } from '../expenseModel';

@Component({
  selector: 'app-view-expense',
  templateUrl: './view-expense.component.html',
  styleUrls: ['./view-expense.component.scss']
})

export class ViewExpenseComponent implements OnInit {

  expenseId: any;

  expensesCollection: AngularFirestoreCollection<Expense>;
  expenses: Observable<Expense[]>;

  expense: Observable<Expense>;

  constructor(private db: AngularFirestore, private route: ActivatedRoute) {
    this.route.params.subscribe(params => {
        console.log(params);
        this.expenseId = params.expenseId;
    })

    this.expensesCollection = this.db.collection('/expenses');

    this.expenses = this.expensesCollection.snapshotChanges().map(changes = {
      return changes.map(a => {
        const data = a.payload.doc.data() as Expense;
        data.id = a.payload.doc.id;
        return data;
      })
    })
  }

  ngOnInit() {
    this.getExpense();
  }

  getExpense() {
    /* ---- ERROR HERE ---- */
    this.expense = this.expensesCollection.where('expenseId', '==', this.expenseId);
    console.log('this.expense: ' + this.expense);
  }

}

Answer 1

There's no where function in AngularFirestoreCollection, instead you should supply the where condition in the second argument of collection(), like this:

this.expensesCollection = this.db.collection('/expenses', ref => ref.where('expenseId', '==', this.expenseId));

Reference: https://github.com/angular/angularfire2/blob/master/docs/firestore/querying-collections.md

Outdated / outright wrong documentation: https://firebase.google.com/docs/firestore/query-data/queries