Question

REACT 上“FirebaseApp”类型中不存在属性“auth”

2021-09-19

6209

javascript reactjs firebase firebase-authentication

我正在学习如何在 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

这是依赖项 package.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 ，它使用的语法与命名空间 ( 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;

请注意，如果您必须重构所有代码才能使用新语法。我建议您查看文档以了解有关新语法的更多信息。另请查看此 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;