安装firebase后出现'firestore'未从'firebase/app'导出的导入错误如何解决

你安装的是9.0及以上版本的Firebase，该版本默认采用模块化API设计，废弃了原有命名空间式的导入使用方式，原有代码的导入逻辑无法在新版本下正常导出firestore等方法，因此触发导入错误。

方案1：兼容原有代码（无需修改业务逻辑） #

直接将导入语句替换为Firebase提供的兼容版导入路径即可，原有其余代码完全不变：

// 仅修改以下三行导入语句即可
import * as firebase from 'firebase/compat/app';
import 'firebase/compat/storage';
import 'firebase/compat/firestore';

// 后续原有配置、初始化、实例获取代码全部保持不变
var firebaseConfig = {
  apiKey: "AIzaSyBWEyocjrQCjoENYbkKIbVe_2D9bXPe8XA",
  authDomain: "sahm-5a4a0.firebaseapp.com",
  projectId: "sahm-5a4a0",
  storageBucket: "sahm-5a4a0.appspot.com",
  messagingSenderId: "1010829019707",
  appId: "1:1010829019707:web:fb166e26f7f3ac66972a1e",
  measurementId: "G-X27Q0GCH8X"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

const projectStorage = firebase.storage();
const projectFirestore = firebase.firestore();
const timestamp = firebase.firestore.FieldValue.serverTimestamp;

export { projectStorage, projectFirestore, timestamp };

方案2：使用官方推荐的模块化写法（长期维护优先选） #

该写法支持Tree Shaking减少打包体积，是Firebase后续版本的标准用法：

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore, serverTimestamp } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "AIzaSyBWEyocjrQCjoENYbkKIbVe_2D9bXPe8XA",
  authDomain: "sahm-5a4a0.firebaseapp.com",
  projectId: "sahm-5a4a0",
  storageBucket: "sahm-5a4a0.appspot.com",
  messagingSenderId: "1010829019707",
  appId: "1:1010829019707:web:fb166e26f7f3ac66972a1e",
  measurementId: "G-X27Q0GCH8X"
};

const app = initializeApp(firebaseConfig);

const projectStorage = getStorage(app);
const projectFirestore = getFirestore(app);
const timestamp = serverTimestamp;

export { projectStorage, projectFirestore, timestamp };

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