Firebase最佳实践：React+Firestore展示条目的优化及安全问题咨询

首先明确Firestore读计数规则：你对读消耗的判断是准确的，调用getDocs拉取全集合时，返回多少条文档就会产生多少次读计费，而非按接口调用次数计算。
当前方案的合理性：如果你的应用条目总量长期维持在百条以内，流量规模不大，这套实现完全可用，不需要额外改造，研发成本最低。 #

• 分页/滚动加载：不要一次性拉取全集合数据，搭配limit和startAfter实现分页，首次加载仅拉取10~20条最新条目，用户滚动到页面底部再加载下一页，单次首页加载仅产生对应分页数量的读请求，大幅降低日常消耗。示例逻辑：

// 首次加载
const firstPage = query(collectionRef, orderBy("createTime", "desc"), limit(20));
const firstSnapshot = await getDocs(firstPage);
// 下一页加载
const lastDoc = firstSnapshot.docs[firstSnapshot.docs.length - 1];
const nextPage = query(collectionRef, orderBy("createTime", "desc"), startAfter(lastDoc), limit(20));

• 开启本地缓存优先策略：Firestore Web SDK默认开启离线缓存，你可以在查询时指定缓存优先策略，重复访问首页时优先读取本地缓存数据，仅在后台同步更新，不会产生额外读计费：

const querySnapshot = await getDocs(collectionRef, { source: "cache-first" });

• 批量聚合存储：如果首页仅需要展示纯文本的条目名称和IPFS链接，可以将多条条目合并存储到单个文档中，比如单文档存储100条条目，拉取100条数据仅会计1次读，要注意单文档最大1MB的容量限制，你的场景下单个文档可存储近万条条目，性价比极高，仅需要额外处理写入时的并发冲突问题即可。

• 必须配置Firestore安全规则：如果未配置安全规则，默认所有人都可以对集合进行增删改查操作，恶意用户可以批量写入垃圾数据、删除所有存量条目、批量拉取全集合数据刷爆你的账单。必须添加规则限制：
  • 配置写权限：仅认证用户可写入，且写入的文档必须符合格式要求（比如条目名称长度限制、IPFS链接格式校验、禁止添加额外字段）
  • 配置修改/删除权限：仅条目所有者可修改/删除自己提交的内容，普通用户仅有读权限
  • 添加速率限制：限制单个用户/IP每分钟最多提交5条条目，避免被刷量
• 前端注入风险规避：所有用户提交的条目名称不要直接作为HTML渲染，React默认会对渲染内容做转义，不要主动使用dangerouslySetInnerHTML渲染用户提交的内容，避免XSS注入风险。
• IPFS内容合规风险：用户提交的IPFS链接可能指向违法违规内容，建议添加内容审核环节，或者在前端展示时添加风险提示，避免合规问题。
• 账单溢出防护：开启Firebase控制台的用量警报，设置最高消费阈值，超出阈值时自动触发通知甚至停服，避免被恶意攻击后产生天价账单。

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