firebase.firestore.Timestamp toDate() 上的异常

Question

I get the exception when I try to access a firebase.firestore.Timestamp (trialEnds) on a document using:

   <ng-container *ngIf="account$ | async as account;">
   // Listing out other account info works fine here...
   // Then an exception on trialEnds access
   <span *ngIf="account.trialEnds != null">
      {{account.trialEnds.toDate() |  date: 'M/d/yyyy'}})
   </span>

The exception I get is like this:

core.js:3828 ERROR TypeError: account_r9062.trialEnds.toDate is not a function at HeaderComponent_ng_container_14_ng_container_1_span_5_Template (header.component.html:38) at executeTemplate (core.js:7485) at refreshView (core.js:7362) at refreshDynamicEmbeddedViews (core.js:8428) at refreshView (core.js:7382) at refreshDynamicEmbeddedViews (core.js:8428) at refreshView (core.js:7382) at refreshDynamicEmbeddedViews (core.js:8428) at refreshView (core.js:7382) at refreshComponent (core.js:8492)

Here is how I set up the data in my component:

   var trialDays = 14
   var trialEndDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() + trialDays)
   var trialEnds = firebase.firestore.Timestamp.fromDate(trialEndDate)
   var account: Account = {
   ...
      trialEnds: trialEnds
   }

The data shows up fine in the Firestore console, but the bizarre part is that if I update it in the console WITHOUT changing the data at all, I can read it just fine. There is literally no difference between the programatically set value and the manually updated value on the document:

It also throws an exception on other calls like toMillis as well. What is going on?

Answer 1

In your type file for account, is trialEnds definded as type of Timestamp

import { Timestamp } from '@firebase/firestore-types';

export interface Account {
  trialEnds: Timestamp;
}

Answer 2

I found a workaround. Instead of calling toDate on the timestamp, I create my own variable tied to the observable as:

   ngOnInit() {
      try {
         this.account$.subscribe(account => {
            this.trialExpiration = account === null || account.trialEnds === null ?
               null : new Date(account.trialEnds.seconds * 1000);
         })
      } catch (error) {
         console.log(error)
      }
   }

Then in the template, use:

   <span *ngIf="trialExpiration != null">
      Trial Expires on {{trialExpiration |  date: 'M/d/yyyy'}}
   </span>

It works, but can anyone explain why calling seconds on the timestamp but toMillis or toDate throws?