javascript - 属性 'auth' 在 REACT 上的类型 'FirebaseApp' 上不存在

Question

我正在学习如何在 react 应用程序中使用 firebase 身份验证，我遇到了这个问题。有人可以帮助我吗？
我已经用 npm 安装了 firebase。
这是我的 firebase.js 文件。

import { initializeApp } from "firebase/app";
import 'firebase/auth'

const firebaseConfig = {
apiKey: "AIzaSyA_89k1bt6Z2_1lVLb_Vwn5OL9_GgTNQEQ",
authDomain: "auth-development-59396.firebaseapp.com",
projectId: "auth-development-59396",
storageBucket: "auth-development-59396.appspot.com",
messagingSenderId: "1003786595756",
appId: "1:1003786595756:web:fa93ae00e49a4c04c49e09"

};

const app = initializeApp(firebaseConfig);

export const auth = app.auth()
export default app

这是依赖包.json 文件。

"dependencies": {
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"bootstrap": "^5.1.1",
"firebase": "^9.0.2",
"react": "^17.0.2",
"react-bootstrap": "^1.6.3",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
 }

Answer 1

您正在使用新的 Modular SDK它使用与 namespace ( v8 ) 版本不同的语法。尝试这个:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth" // New import

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app)
export default app

请注意，如果您必须重构所有代码以使用新语法。我建议查看 documentation了解有关新语法的更多信息。也结帐 this Firecast .

如果您希望使用 V8 命名空间语法，那么您可以使用 compat版本:

import firebase from "firebase/compat/app"
import "firebase/compat/auth"

if (!firebase.apps.length) firebase.initializeApp({...config})

export const auth = firebase.auth()
export default app