Next.js中访问Firestore的Map类型字段isReferralAvailable键值对问题

一、解决console.log(referralCodes)无输出的问题 #

1. 调整日志打印时机
   referralCodes是异步获取的状态，初始为空数组，直接在组件顶部打印只会拿到初始值。可以通过监听状态变化来打印最新数据：

useEffect(() => {
  console.log("当前推荐码数据:", referralCodes);
}, [referralCodes]);

也可以在onSnapshot回调里直接打印返回的原始数据，确认Firestore是否返回了内容：

const unsubscribe = onSnapshot(q, (response) => {
  console.log("Firestore返回的原始文档:", response.docs);
  setterName(
    response.docs.map((data) => {
      return { ...data.data(), id: data.id };
    })
  );
});

2. 修正查询条件
   你的查询用了where("isReferralAvailable", "in", [true, false])，但isReferralAvailable是Map类型，Firestore的in操作符会匹配整个Map对象是否在数组中，这几乎不可能命中数据，导致返回空数组。根据需求调整查询：

• 若要筛选Map中某个键（比如TESTER1）值为true的文档：

const q = query(
  collection(db, collectionName),
  where("isReferralAvailable.TESTER1", "==", true)
);

• 若要获取所有包含isReferralAvailable字段的文档，直接去掉where条件即可。

3. 检查Firestore安全规则
   确保当前规则允许读取ReferralCodes集合，开发阶段可临时设置宽松规则（上线前务必修改为严格规则）：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /ReferralCodes/{document} {
      allow read: if true;
      allow write: if request.auth != null;
    }
  }
}

二、访问Map类型字段isReferralAvailable的键值对 #

Firestore的Map字段获取后会转为JavaScript对象，可通过以下方式访问和展示：

1. 控制台打印指定键的值 #

// 监听referralCodes变化，打印每个文档的TESTER1状态
useEffect(() => {
  referralCodes.forEach(doc => {
    console.log(`文档${doc.id}的TESTER1状态:`, doc.isReferralAvailable?.TESTER1);
    // 打印整个Map的所有键值对
    console.log(`文档${doc.id}的所有推荐码状态:`, doc.isReferralAvailable);
  });
}, [referralCodes]);

2. 在表格中展示所有键值对 #

使用Object.entries()将Map对象转为[键, 值]数组，再遍历渲染：

const displayReferralCodes = referralCodes
  .slice(pagesVisited, pagesVisited + usersPerPage)
  .map((doc) => (
    <tr key={doc.id} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
      <td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
        {Object.entries(doc.isReferralAvailable).map(([code, isAvailable]) => (
          <div key={code} className="mb-2">
            <span>推荐码：{code}</span>
            <span className="ml-2">可用状态：{isAvailable ? '✅ 是' : '❌ 否'}</span>
          </div>
        ))}
      </td>
    </tr>
  ));

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