Angular 6升级后Cloud Firestore返回Timestamp致DatePipe报错求助

我太懂这种升级后突然要改一堆代码的崩溃感了！幸好Firebase在你当前的版本（firebase 5.0.3 + angularfire2 5.0.0-rc.9）里提供了全局配置，可以让Firestore自动把Timestamp类型转换成Date对象，完全不用逐一修改业务代码。

具体实现步骤： #

找到你项目中初始化AngularFirestore的文件（通常是app.module.ts），添加全局配置即可：

方式一：在模块初始化时配置

import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';

// 你的Firebase配置信息
const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  databaseURL: 'YOUR_DATABASE_URL',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID'
};

@NgModule({
  declarations: [AppComponent],
  imports: [
    AngularFireModule.initializeApp(firebaseConfig),
    // 在这里添加全局设置，开启自动转换Timestamp为Date
    AngularFirestoreModule.settings({ timestampsInSnapshots: true })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

方式二：在组件/服务的构造函数中配置

如果你的Firestore初始化逻辑分散，也可以在注入AngularFirestore的地方设置：

import { AngularFirestore } from '@angular/fire/firestore';

export class AppComponent {
  constructor(private afs: AngularFirestore) {
    // 开启Timestamp自动转Date
    afs.settings({
      timestampsInSnapshots: true
    });
  }
}

原理说明： #

这个timestampsInSnapshots配置是Firebase专门为兼容旧版本行为添加的——升级前Firestore默认把timestamp字段转为Date对象，升级后默认返回Timestamp类型。开启这个配置后，所有从Firestore读取的timestamp字段都会自动转为Date，这样你原来的{{ data.birthday_date | date }}管道、Angular Material DatePicker都能正常工作，完全不需要修改业务代码。

注意事项： #

如果你之后计划升级到firebase 6.x及以上版本，这个配置会被移除（因为新版本默认推荐使用Timestamp类型），不过那时候你可以考虑使用Firestore的自定义数据转换器来统一处理类型转换，但就你当前的版本而言，这个方案完全适用。

内容的提问来源于stack exchange，提问作者Luiz Ricardo Cardoso