如何在create-react-app项目中用ES6语法导入Firebase Firestore？求示例

首先直接回答你的核心问题：require('firebase/firestore')对应的ES6写法分两种情况，取决于你使用的Firebase版本：

情况1：Firebase v8及以下（命名空间版本） #

对应的ES6导入语句是：

import 'firebase/firestore';

这条语句会加载Firestore模块并将其挂载到Firebase的全局命名空间上，和require('firebase/firestore')的作用完全一致。

下面是完整的配置和使用示例：

1. 安装Firebase #

在项目根目录运行：

npm install firebase@8.x
# 或者用yarn
yarn add firebase@8.x

2. 创建Firebase配置文件 #

在src目录下新建firebase.js：

import firebase from 'firebase/app';
import 'firebase/firestore'; // 这就是你要的ES6等价写法

// 替换成你自己的Firebase项目配置（从Firebase控制台获取）
const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  projectId: "你的PROJECT_ID",
  storageBucket: "你的STORAGE_BUCKET",
  messagingSenderId: "你的SENDER_ID",
  appId: "你的APP_ID"
};

// 初始化Firebase应用
firebase.initializeApp(firebaseConfig);

// 导出Firestore实例供组件使用
export const db = firebase.firestore();

3. 在React组件中使用Firestore #

比如新建src/components/FirestoreExample.js：

import React, { useEffect, useState } from 'react';
import { db } from '../firebase';

function FirestoreExample() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    // 监听Firestore集合的实时更新
    const unsubscribe = db.collection('posts')
      .onSnapshot(snapshot => {
        const postList = snapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data()
        }));
        setPosts(postList);
      });

    // 组件卸载时取消监听，避免内存泄漏
    return () => unsubscribe();
  }, []);

  return (
    <div className="post-list">
      <h2>从Firestore获取的文章</h2>
      {posts.map(post => (
        <div key={post.id} className="post-item">
          <h3>{post.title}</h3>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

export default FirestoreExample;

情况2：Firebase v9+（模块化版本，官方推荐） #

如果你使用的是最新版Firebase，官方已经切换到了模块化API，这种方式可以减少打包体积，对应的导入方式是按需导入具体的方法，而不是加载整个模块：

1. 安装最新版Firebase #

npm install firebase
# 或者
yarn add firebase

2. 配置文件src/firebase.js #

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore'; // 按需导入Firestore初始化方法

const firebaseConfig = {
  // 你的项目配置
};

const app = initializeApp(firebaseConfig);
// 获取Firestore实例
export const db = getFirestore(app);

3. 组件中使用示例 #

import React, { useEffect, useState } from 'react';
import { db } from '../firebase';
import { collection, onSnapshot } from 'firebase/firestore'; // 按需导入需要的方法

function FirestoreExample() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const postsCollection = collection(db, 'posts');
    const unsubscribe = onSnapshot(postsCollection, snapshot => {
      const postList = snapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }));
      setPosts(postList);
    });

    return () => unsubscribe();
  }, []);

  return (
    <div className="post-list">
      <h2>模块化Firestore示例</h2>
      {posts.map(post => (
        <div key={post.id} className="post-item">
          <h3>{post.title}</h3>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

export default FirestoreExample;

关键注意点 #

• Create React App默认支持ES6导入语法，不需要额外配置Babel或webpack
• 确保你从Firebase控制台复制的配置信息完全正确，否则会导致初始化失败
• 使用实时监听（onSnapshot）时，记得在组件卸载时取消订阅，避免内存泄漏

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