如何在类中导入 Firebase Auth、Firestore 和 Firebase Storage 节点包以及它们的 TypeScript 类型？

IT技术 reactjs typescript firebase google-cloud-firestore firebase-authentication
2021-04-29 09:07:50

我需要导入 Firebase 包并将它们放入一个必须与 Next.js 和 React Native 兼容的module的类中。这对于 React Native 版本非常有效，但我不太习惯使用 TypeScrit 进行 React 并遇到一些问题。

设置：

  • VS代码
  • typescript 3.9
  • TSLint 5
  • Lerna multirepo + Yarn 工作区：
  • 一个@project/apps 通用包（我们在这里）
  • 使用此文件的带有 next.js 的 @project/web 包
  • 用于 React Native 的 @project/mobile 包，使用此文件的 .native.ts 版本

这是 tsconfig.json：

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noUnusedLocals": true,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "declaration": true
  },
  "exclude": ["node_modules", "**/*.spec.ts", "**/__tests__/*", "babel.config.js", "metro.config.js", "jest.config.js"]
}

这是 tslint.json：

{
  "extends": ["tslint:recommended", "tslint-config-prettier"],
  "rules": {
    "object-literal-sort-keys": false,
    "interface-name": false,
    "member-access": [true, "no-public"],
    "ordered-imports": false,
    "no-console": false
  }
}

这是 Firebase 类的代码：

import app from '@firebase/app'
import { FirebaseApp } from '@firebase/app-types'
import '@firebase/firestore'
import { FirebaseFirestore } from '@firebase/firestore-types'
import '@firebase/auth'
import { FirebaseAuth } from '@firebase/auth-types'
import '@firebase/storage'
import { FirebaseStorage } from '@firebase/storage-types'

import firebaseConfig from './config'

export class Firebase {
  app: FirebaseApp
  auth: FirebaseAuth
  db: FirebaseFirestore
  firestore: FirebaseFirestore
  files: FirebaseStorage

  constructor() {
    app.initializeApp(firebaseConfig)
    this.app = app.app()
    this.auth = app.auth()
    this.db = app.firestore()
    this.firestore = app.firestore
    this.files = app.storage()
  }
}

const firebase = new Firebase()
export default firebase

我有几个问题：

在@firebase/firestore 导入上：

Could not find a declaration file for module '@firebase/firestore'. 'c:/code/project/node_modules/@firebase/firestore/dist/index.node.cjs.js' implicitly has an 'any' type.
  Try `npm install @types/firebase__firestore` if it exists or add a new declaration (.d.ts) file containing `declare module '@firebase/firestore';`ts(7016)

在 this.auth = app.auth() 和 this.files = app.storage()

Cannot invoke an object which is possibly 'undefined'.ts(2722)

在 this.db = app.firestore() 和 this.firestore = app.firestore

Property 'firestore' does not exist on type 'FirebaseNamespace'.ts(2339)

好吧……真是一团糟。我阅读了几个教程，但从现在开始我没有得到它。你能帮忙吗？

2个回答

当我为 Firebase 使用 TypeScript 时，我不使用任何以“@”开头的包。一切都可以很好地导入，如文档中所示。从该页面：

// Firebase App (the core Firebase SDK) is always required and must be listed first
import * as firebase from "firebase/app";

// If you enabled Analytics in your project, add the Firebase SDK for Analytics
import "firebase/analytics";

// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";

以下是新代码，遵循 Doug 的回答中的讨论：

import app from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import 'firebase/storage'

import firebaseConfig from './config'

export class Firebase {
  app: app.app.App
  auth: app.auth.Auth
  db: app.firestore.Firestore
  firestore: (app?: app.app.App | undefined) => app.firestore.Firestore
  files: app.storage.Storage

  constructor() {
    app.initializeApp(firebaseConfig)
    this.app = app.app()
    this.auth = app.auth()
    this.db = app.firestore()
    this.firestore = app.firestore
    this.files = app.storage()
  }
}

const firebase = new Firebase()
export default firebase

这次没有错误。

其它你可能感兴趣的问题
上一篇如何通过 props 将原始 HTML 内容呈现给 React 传递？ 下一篇刷新页面时在 S3 AWS 上react应用程序 SPA 显示 404 页面