React JS如何从Firebase获取白名单地址存入useState数组

前置准备 #

• 确保项目已经安装firebase依赖，完成Firebase项目初始化配置，拿到数据库实例。
• 提前确认你使用的是Firebase Realtime Database（实时数据库）还是Cloud Firestore，两种数据库的读取API有区别，下面分别给出实现。

具体代码实现 #

首先导入需要的依赖和方法：

import { useState, useEffect } from 'react';
// 替换成你本地项目中Firebase配置文件的导出路径
import { db } from './firebase.config';

// 👇 如果用Realtime Database，导入这两个方法
import { ref, get } from 'firebase/database';

// 👇 如果用Cloud Firestore，注释上面的导入，换成下面这两个方法
// import { collection, getDocs } from 'firebase/firestore';

在组件内编写读取逻辑：

export default function WhitelistComponent() {
  // 初始化存储地址的state，默认空数组
  const [whitelist, setWhitelist] = useState([]);
  const [loading, setLoading] = useState(true);
  const [errMsg, setErrMsg] = useState('');

  useEffect(() => {
    const getWhitelistData = async () => {
      try {
        let addressList = [];

        // ========== Realtime Database 读取逻辑 ==========
        // 把括号里的路径替换成你数据库里存白名单的实际节点路径
        const whitelistRef = ref(db, 'whitelist/ethAddresses');
        const snapshot = await get(whitelistRef);
        if (snapshot.exists()) {
          const rawData = snapshot.val();
          // 如果数据是对象键值对格式（Firebase push生成的随机key对应地址），用Object.values转成数组
          addressList = Array.isArray(rawData) ? rawData : Object.values(rawData);
        }
        // ========== Realtime Database 逻辑结束 ==========

        // ========== 如果用Firestore，把上面的Realtime Database逻辑替换成下面这段 ==========
        // // 把括号里的集合名替换成你存白名单的实际集合名
        // const querySnap = await getDocs(collection(db, 'whitelist'));
        // querySnap.forEach(doc => {
        //   // 把address替换成你文档中存储以太坊地址的实际字段名
        //   addressList.push(doc.data().address);
        // });
        // ========== Firestore逻辑结束 ==========

        setWhitelist(addressList);
      } catch (err) {
        setErrMsg('白名单读取失败：' + err.message);
      } finally {
        setLoading(false);
      }
    };

    getWhitelistData();
  }, []);

  if (loading) return <div>白名单加载中...</div>;
  if (errMsg) return <div>{errMsg}</div>;

  // 后续可以直接使用whitelist数组做校验、渲染等逻辑
  return (
    <div>
      <p>已加载{whitelist.length}个白名单地址</p>
    </div>
  );
}

注意事项 #

1. 代码里的节点路径、集合名、存储地址的字段名需要和你自己Firebase数据库里的实际结构对应，否则会读不到数据。
2. 需要提前在Firebase控制台配置对应数据库的安全规则，确保前端有读权限，否则会抛出权限拒绝错误。如果是公开可访问的白名单，可以临时把对应路径的读权限设为true，生产环境建议根据业务场景收紧规则，避免数据泄露。

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