使用 React JS 的 Facebook 身份验证 Firebase - 提供者错误

Question

我想使用 Firebase 身份验证通过 React JS 登录 Facebook。我将 firebaseSample.ts 和 config.ts 文件留在下面。

我在 React JS 端收到错误“TypeError: Cannot read property 'FacebookAuthProvider' of undefined”。这条线正是如此。

• facebook：新的 firebase.auth.FacebookAuthProvider()

在一些帖子中，“import * as firebase from "firebase/app";”我看过更改导入结构的相关文章。

import * as firebase from "firebase";据说是。但是，当我这样做时，我在 initializeApp 端收到错误。

firebaseSample.ts

import * as firebase from "firebase/app";
import 'firebase/auth';
import 'firebase/firestore';
import config from 'config/config';

const FirebaseSample = firebase.initializeApp(config.firebase);

export const Providers = {
facebook: new firebase.auth.FacebookAuthProvider()
}

export const auth = firebase.auth();
export default FirebaseSample;

config.ts

const config = {
firebase: { 
  apiKey: "unique_id",
  authDomain: "unique_id",
  databaseURL: unique_id",
  projectId: "unique_id-1663e",
  storageBucket: "unique_id.appspot.com",
  messagingSenderId: "unique_id",
  appId: "1:unique_id",
  measurementId: "G-unique_id"
  }
}
export default config;

更新 firebaseSample.ts

import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import 'firebase/compat/firestore'
import config from 'config/config';

const FirebaseSample = firebase.initializeApp(config.firebase);

export const Providers = {
facebook: new firebase.auth.FacebookAuthProvider()
}

 export const auth = firebase.auth();
 export default FirebaseSample;

• 更新 firebaseSample.ts 文件中的导入文件后，我开始收到错误“ReferenceError: Can't find variable: Providers”。我将其作为屏幕截图附上。

更新 2.0 firebaseSample.ts

import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import 'firebase/compat/firestore'
import config from 'config/config';

const FirebaseSample = firebase.initializeApp(config.firebase);

const Providers = {
  facebook: new firebase.auth.FacebookAuthProvider()
 }

   export Providers;    

  export const auth = firebase.auth();
  export default FirebaseSample;

最后更新和信息

我通过更新整个项目中的 firebase 导入结构解决了该错误。

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

非常感谢您。

Answer 1

如果您使用的是 Firebase SDK 的新版本。您需要将导入更改为的版本 9：

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

或者根据新的 Firebase SDK 9 使用新语法。compat 导入允许您仍然使用旧语法。

你也可以试试这样写吗：

export const Providers = {
  facebook: new firebase.auth.FacebookAuthProvider()
}

像这样：

const Providers = {
  facebook: new firebase.auth.FacebookAuthProvider()
}

export { Providers }