SwiftUI Firestore等待加载数据

基础概念

SwiftUI 是苹果推出的一个用于构建用户界面的框架，它允许开发者使用声明式编程的方式来描述用户界面。Firestore 是 Google Firebase 提供的一种 NoSQL 数据库服务，它可以存储和同步数据，并且支持实时更新。

类型

SwiftUI: 是一种 UI 框架。
Firestore: 是一种 NoSQL 数据库服务。

应用场景

SwiftUI: 适用于 iOS、macOS、watchOS 和 tvOS 应用的用户界面开发。
Firestore: 适用于需要实时数据同步和灵活数据模型的 Web、移动和 IoT 应用。

遇到的问题及解决方法

在使用 SwiftUI 和 Firestore 结合开发时，可能会遇到等待加载数据的问题。这通常是因为数据需要从 Firestore 异步加载，而 SwiftUI 在渲染视图时需要同步完成。

为什么会这样？

SwiftUI 的视图是声明式的，它们在需要时才会被创建和更新。当试图从 Firestore 加载数据时，由于这是一个异步操作，SwiftUI 会在数据加载完成之前尝试渲染视图，导致显示为空或者出现加载指示器。

解决方法

可以使用 @StateObject 或 @ObservedObject 属性包装器来管理 Firestore 数据的状态，并结合 ViewBuilder 来条件性地显示加载状态或数据。

以下是一个简单的示例代码，展示了如何在 SwiftUI 中等待 Firestore 加载数据：

import SwiftUI
import Firebase
import FirebaseFirestore

class FirestoreData: ObservableObject {
    @Published var data: [String] = []
    private var db = Firestore.firestore()
    
    init() {
        loadData()
    }
    
    func loadData() {
        let collectionRef = db.collection("your-collection")
        collectionRef.addSnapshotListener { querySnapshot, error in
            guard let documents = querySnapshot?.documents else {
                print("Error fetching documents: \(error!)")
                return
            }
            
            let data = documents.map { $0["your-field"]! }
            DispatchQueue.main.async {
                self.data = data
            }
        }
    }
}

struct ContentView: View {
    @StateObject private var firestoreData = FirestoreData()
    
    var body: some View {
        VStack {
            if firestoreData.data.isEmpty {
                ProgressView()
                    .frame(maxWidth: .infinity)
                    .background(Color.gray.opacity(0.2))
            } else {
                List(firestoreData.data, id: \.self) { item in
                    Text(item)
                }
            }
        }
        .onAppear {
            // Ensure Firestore is configured before loading data
            FirebaseApp.configure()
        }
    }
}

在这个示例中，FirestoreData 类负责从 Firestore 加载数据，并通过 @Published 属性包装器通知 SwiftUI 数据的变化。ContentView 视图使用 @StateObject 来创建并管理 FirestoreData 实例，并根据数据是否加载完成来显示加载指示器或数据列表。