Flutter Firebase：如何避免页面导航重复读取相同文档？

针对你遇到的重复查询问题，以下几种方案可以有效避免不必要的网络请求：

1. 内存缓存（单例实现） #

创建一个全局单例的缓存管理器，存储已查询过的帖子关联数据，每次进入页面先检查缓存，存在则直接使用，不存在再发起请求。

class PostCache {
  static final PostCache _instance = PostCache._internal();
  factory PostCache() => _instance;
  PostCache._internal();

  // key为帖子ID，value为对应的10条文档数据
  final Map<String, List<Document>> _cacheStore = {};

  // 获取缓存数据
  List<Document>? getCachedPosts(String postId) => _cacheStore[postId];

  // 保存数据到缓存
  void cachePosts(String postId, List<Document> posts) {
    _cacheStore[postId] = posts;
  }

  // 可选：主动清除指定帖子的缓存（比如数据更新时）
  void clearCache(String postId) {
    _cacheStore.remove(postId);
  }
}

在帖子详情页的逻辑中：

@override
void initState() {
  super.initState();
  _loadPosts();
}

void _loadPosts() async {
  final cachedPosts = PostCache().getCachedPosts(widget.postId);
  if (cachedPosts != null) {
    setState(() {
      _posts = cachedPosts;
    });
    return;
  }
  // 缓存不存在，发起网络请求
  final fetchedPosts = await api.fetchRelatedPosts(widget.postId, limit:10);
  setState(() {
    _posts = fetchedPosts;
  });
  // 保存到缓存
  PostCache().cachePosts(widget.postId, fetchedPosts);
}

2. 持久化缓存（跨会话保留） #

如果需要用户退出APP再进入也能复用缓存数据，可以用本地存储方案，比如shared_preferences（适合简单数据）或Hive（适合复杂对象）。

以Hive为例：

1. 先注册Document类的适配器（需要让Document继承HiveObject或实现TypeAdapter）
2. 初始化并打开缓存盒子：

await Hive.initFlutter();
Hive.registerAdapter(DocumentAdapter());
final cacheBox = await Hive.openBox('post_related_cache');

3. 页面加载时优先读取本地缓存：

void _loadPosts() async {
  final cachedPosts = cacheBox.get(widget.postId) as List<Document>?;
  if (cachedPosts != null) {
    setState(() => _posts = cachedPosts);
    return;
  }
  final fetchedPosts = await api.fetchRelatedPosts(widget.postId, limit:10);
  setState(() => _posts = fetchedPosts);
  cacheBox.put(widget.postId, fetchedPosts);
}

3. 利用状态管理工具的缓存能力 #

使用Riverpod、Provider或Bloc等状态管理库，将帖子数据托管到全局或跨页面的状态中，页面销毁时状态不会被回收，再次进入可直接读取。

以Riverpod为例，FutureProvider默认会缓存异步请求结果：

// 全局定义Provider
final relatedPostsProvider = FutureProvider.family<List<Document>, String>((ref, postId) async {
  return await api.fetchRelatedPosts(postId, limit:10);
});

// 帖子详情页中使用
class PostDetailPage extends ConsumerWidget {
  final String postId;
  const PostDetailPage({super.key, required this.postId});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final postsAsyncValue = ref.watch(relatedPostsProvider(postId));
    return postsAsyncValue.when(
      loading: () => const CircularProgressIndicator(),
      error: (err, stack) => Text('加载失败: $err'),
      data: (posts) => ListView.builder(
        itemCount: posts.length,
        itemBuilder: (context, index) => PostItem(post: posts[index]),
      ),
    );
  }
}

这种方式下，第一次请求后结果会被缓存，再次进入页面直接使用缓存数据，需要刷新时调用ref.invalidate(relatedPostsProvider(postId))即可。

注意事项 #

• 缓存失效：当帖子关联数据更新（比如新增评论、点赞），需要主动清除对应帖子的缓存，确保用户看到最新数据。
• 内存缓存限制：如果帖子数量多，可考虑设置缓存过期时间或限制缓存条目数量，避免内存占用过高。

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