React项目因Firebase getAuth导入错误无法编译求助

1. 确认Firebase Auth依赖已安装 #

先确保本地已安装完整的Firebase包，执行以下命令：

npm install firebase
# 或使用yarn
yarn add firebase

2. 修正firebase.js中的Auth初始化代码 #

错误核心原因是getAuth()需要传入初始化后的Firebase App实例，修改后的代码如下：

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

const firebaseConfig = {
  apiKey: "AIzaSyCq8nv8xkSX7Z1V2-1aQaxkW72HeurOZj8",
  authDomain: "cyclofit-ee7cf.firebaseapp.com",
  databaseURL: "https://cyclofit-ee7cf-default-rtdb.asia-southeast1.firebasedatabase.app",
  projectId: "cyclofit-ee7cf",
  storageBucket: "cyclofit-ee7cf.appspot.com",
  messagingSenderId: "676472405532",
  appId: "1:676472405532:web:cb0ccd1b8bd9c86372a9d9",
  measurementId: "G-NEEDNQ6SFS"
};

const app = initializeApp(firebaseConfig);
const database = getDatabase(app);
// 传入app实例初始化Auth
const auth = getAuth(app);

export { app, auth, database, firebaseConfig };

3. 移除index.js中重复的Firebase初始化 #

你已经在firebase.js中完成了App初始化，重复调用会导致冲突，修改后的index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
// 仅导入需要的实例，无需再次初始化
import { auth } from './firebase';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

额外检查：Firebase版本兼容性 #

如果问题仍存在，检查package.json中的Firebase版本，确保使用v9及以上的模块化版本，执行更新命令：

npm update firebase

内容的提问来源于stack exchange，提问作者samyak bhabhra