SwiftUI中Firebase数据分批加载实现方案咨询

针对一次性加载所有帖子导致的卡顿和过多网络请求问题，需从分页数据请求和UI懒加载渲染两方面配合解决，同时优化用户数据获取逻辑：

一、改造Firebase分页查询（每次加载5条） #

原代码一次性拉取所有帖子，需改为分页加载模式，每次请求5条并记录最后一条帖子的快照作为下一页起始点：

1. 添加分页相关变量 #

在ViewModel中补充以下变量：

private var lastDocument: DocumentSnapshot? // 记录上一页最后一个文档，用于分页锚点
private var isLoading = false // 防止重复触发加载请求
var postsWithUsers = [PostWithUser]() // 存储已加载的帖子列表
var cachedUsers = [String: User]() // 缓存用户数据，避免重复请求同一用户

2. 实现分页请求函数 #

替换原fetchPosts为分页版本：

func fetchNextPage() {
    guard !isLoading else { return }
    isLoading = true
    
    var query = postsRef.order(by: "timestamp", descending: true).limit(to: 5)
    
    // 如果有上一页的最后文档，从该文档之后开始查询
    if let lastDoc = lastDocument {
        query = query.start(afterDocument: lastDoc)
    }
    
    query.getDocuments { [weak self] snapshot, error in
        guard let self = self else { return }
        defer { self.isLoading = false }
        
        if let error = error {
            print("获取帖子失败: \(error.localizedDescription)")
            return
        }
        
        guard let documents = snapshot?.documents, !documents.isEmpty else {
            // 没有更多数据可加载
            return
        }
        
        // 更新分页锚点
        self.lastDocument = documents.last
        
        // 提取所有需要查询的用户ID并去重
        let userIds = documents.compactMap { $0.data()["userId"] as? String }.unique()
        self.fetchUsers(for: userIds) { [weak self] users in
            guard let self = self else { return }
            
            // 将帖子与对应用户关联
            let newPosts = documents.compactMap { doc -> PostWithUser? in
                let data = doc.data()
                guard let userId = data["userId"] as? String,
                      let user = users[userId],
                      // 保留原帖子字段解析逻辑
                      let parentId = data["parentId"] as? String,
                      let groupId = data["groupId"] as? String,
                      let text = data["text"] as? String,
                      let isPinned = data["isPinned"] as? Bool,
                      let imageUrl = data["imageUrl"] as? String,
                      let videoUrl = data["videoUrl"] as? String,
                      let timestamp = data["timestamp"] as? Timestamp,
                      let views = data["views"] as? Int else {
                    return nil
                }
                
                let post = Post(id: doc.documentID, userId: userId, parentId: parentId, groupId: groupId, text: text, imageUrl: imageUrl, videoUrl: videoUrl, timestamp: timestamp.dateValue(), isPinned: isPinned, likedBy: [], views: views)
                return PostWithUser(post: post, user: user)
            }
            
            // 更新帖子列表
            DispatchQueue.main.async {
                self.postsWithUsers.append(contentsOf: newPosts)
            }
        }
    }
}

// 批量获取用户数据，减少网络请求次数
private func fetchUsers(for userIds: [String], completion: @escaping ([String: User]) -> Void) {
    // 先从缓存获取已有用户
    var fetchedUsers = cachedUsers.filter { userIds.contains($0.key) }
    let missingUserIds = userIds.filter { !fetchedUsers.keys.contains($0) }
    
    guard !missingUserIds.isEmpty else {
        completion(fetchedUsers)
        return
    }
    
    // 批量查询缺失的用户
    usersRef.whereField("__name__", in: missingUserIds).getDocuments { [weak self] snapshot, error in
        guard let self = self else { return }
        
        if let error = error {
            print("获取用户失败: \(error.localizedDescription)")
            completion(fetchedUsers)
            return
        }
        
        let newUsers = snapshot?.documents.compactMap { doc -> (String, User)? in
            let userId = doc.documentID
            let data = doc.data()
            let user = User(
                id: userId,
                username: data["username"] as? String ?? "",
                bio: data["bio"] as? String ?? "",
                profilePictureUrl: data["profileImageUrl"] as? String ?? "",
                privateProfile: data["privateProfile"] as? Bool ?? false,
                privateFollowerList: data["privateFollowerList"] as? Bool ?? false,
                privateFollowingList: data["privateFollowingList"] as? Bool ?? false,
                privateReplies: data["privateReplies"] as? Bool ?? false,
                privateLikes: data["privateLikes"] as? Bool ?? false,
                accountDeactivated: data["accountDeactivated"] as? Bool ?? false
            )
            return (userId, user)
        } ?? []
        
        // 更新缓存
        newUsers.forEach { self.cachedUsers[$0.0] = $0.1 }
        fetchedUsers.merge(dictionary: Dictionary(uniqueKeysWithValues: newUsers))
        
        completion(fetchedUsers)
    }
}

// 数组去重扩展
extension Array where Element: Hashable {
    func unique() -> [Element] {
        var seen = Set<Element>()
        return filter { seen.insert($0).inserted }
    }
}

// 字典合并扩展
extension Dictionary {
    mutating func merge(dictionary: Dictionary) {
        dictionary.forEach { updateValue($1, forKey: $0) }
    }
}

二、正确实现SwiftUI懒加载UI #

确保用LazyVStack包裹帖子列表，利用最后一个元素的onAppear触发下一页加载，避免无效懒加载：

struct PostListView: View {
    @StateObject var viewModel: PostViewModel
    
    var body: some View {
        ScrollView {
            LazyVStack(spacing: 16) {
                ForEach(viewModel.postsWithUsers) { postWithUser in
                    PostItemView(post: postWithUser.post, user: postWithUser.user)
                        .onAppear {
                            // 当最后一个帖子进入可视范围时，加载下一页
                            if postWithUser.id == viewModel.postsWithUsers.last?.id {
                                viewModel.fetchNextPage()
                            }
                        }
                }
                
                // 加载状态指示器
                if viewModel.isLoading {
                    ProgressView()
                        .padding(.vertical)
                }
            }
            .padding(.horizontal)
        }
        .onAppear {
            // 页面首次加载时获取第一页数据
            if viewModel.postsWithUsers.isEmpty {
                viewModel.fetchNextPage()
            }
        }
    }
}

// 让PostWithUser实现Identifiable协议，方便ForEach遍历
extension PostWithUser: Identifiable {
    var id: String { post.id }
}

三、关键优化点说明 #

1. 分页请求：每次仅拉取5条帖子，减少单次网络请求的数据量，避免一次性加载大量数据导致内存占用过高。
2. 批量用户查询：将多个帖子的用户ID收集后批量查询，替代原有的单个用户请求，大幅减少网络请求次数。
3. 用户数据缓存：缓存已获取的用户信息，避免重复请求同一用户的数据。
4. UI懒加载：LazyVStack仅渲染可视范围内的帖子，配合分页请求实现滚动到末尾自动加载下一页，真正做到按需加载。

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