SwiftUI闭包内@Published无法触发视图更新的问题排查

• ViewModel实例不共享：LocationView中创建的places是独立的LocationsViewModel实例，而MapView内部又新建了另一个locationsViewModel实例。两个实例完全独立，因此前者调用getLocationsOnButton()更新的locations数组，根本不会同步到后者，地图视图自然无法观测到变化。
• 潜在线程安全问题：Firestore的查询回调默认在后台队列执行，直接在后台线程修改@Published属性可能导致UI更新异常（虽然当前代码可能侥幸在主线程，但不符合SwiftUI的线程规范）。
• 冗余的数据处理：中间维护matchingDocs数组再二次转换为Location对象，不仅增加代码复杂度，还可能因多次调用append触发不必要的视图更新。

1. 共享ViewModel实例 #

在视图树的父节点（如LocationView）用@StateObject创建唯一的LocationsViewModel实例，子视图（MapView）通过@ObservedObject接收该实例，确保整个视图树共享同一数据源。

2. 修正线程问题 #

所有修改@Published属性的操作必须切换到主线程，避免后台线程更新UI导致的异常。

3. 简化数据流程 #

直接在Firestore回调中转换Location对象，收集完成后一次性赋值给locations数组，减少视图更新次数，提升性能。

4. 安全的类型转换 #

替换强制解包as!为可选绑定，避免因数据格式错误导致崩溃。

修改后的完整代码 #

LocationsViewModel #

import Foundation
import CoreLocation
import FirebaseFirestore
import GeoFire

struct Location: Identifiable {
    let id = UUID()
    let name: String
    let coordinate: CLLocationCoordinate2D
}

class LocationsViewModel: NSObject, ObservableObject {

    @Published var locations: [Location] = []
    private let db = Firestore.firestore() // 提前初始化Firestore实例

    /// 根据中心点和半径查询附近位置
    /// - Parameters:
    ///   - center: 查询中心点坐标
    ///   - radiusInM: 查询半径（单位：米）
    func fetchNearbyLocations(center: CLLocationCoordinate2D, radiusInM: Double = 1000) {
        var collectedLocations: [Location] = []
        var completedQueries = 0
        
        // 生成GeoFire查询边界
        let queryBounds = GFUtils.queryBounds(forLocation: center, withRadius: radiusInM)
        let queries = queryBounds.map { bound in
            db.collection("places")
                .order(by: "geohash")
                .start(at: [bound.startValue])
                .end(at: [bound.endValue])
        }
        
        let totalQueries = queries.count
        
        // 处理单个查询结果
        func handleQueryResult(snapshot: QuerySnapshot?, error: Error?) {
            defer {
                completedQueries += 1
                // 所有查询完成后，主线程更新数据源
                if completedQueries == totalQueries {
                    DispatchQueue.main.async {
                        self.locations = collectedLocations
                    }
                }
            }
            
            guard let documents = snapshot?.documents else {
                print("查询失败: \(error?.localizedDescription ?? "未知错误")")
                return
            }
            
            let centerLocation = CLLocation(latitude: center.latitude, longitude: center.longitude)
            
            for document in documents {
                guard let lat = document.data()["lat"] as? Double,
                      let lng = document.data()["lng"] as? Double else {
                    continue
                }
                
                let locationCoordinate = CLLocationCoordinate2D(latitude: lat, longitude: lng)
                let location = CLLocation(latitude: lat, longitude: lng)
                let distance = GFUtils.distance(from: centerLocation, to: location)
                
                // 过滤符合半径要求的位置
                if distance <= radiusInM {
                    let locationName = document["name"] as? String ?? "Test"
                    let newLocation = Location(name: locationName, coordinate: locationCoordinate)
                    collectedLocations.append(newLocation)
                }
            }
        }
        
        // 执行所有查询
        queries.forEach { $0.getDocuments(completion: handleQueryResult) }
    }
}

视图部分 #

import SwiftUI
import MapKit

struct MapView: View {
    @StateObject private var mapViewModel = MapViewModel()
    @ObservedObject var locationsViewModel: LocationsViewModel // 接收共享的ViewModel实例
    
    var body: some View {
        Map(coordinateRegion: $mapViewModel.region, 
            showsUserLocation: true, 
            annotationItems: locationsViewModel.locations) { location in
            MapMarker(coordinate: location.coordinate)
        }
        .ignoresSafeArea()
    }
}

struct LocationView: View {
    @StateObject private var locationsViewModel = LocationsViewModel() // 创建唯一的ViewModel实例
    @StateObject private var mapViewModel = MapViewModel()
    
    var body: some View {
        ZStack {
            MapView(locationsViewModel: locationsViewModel)
            
            // 查询按钮置于底部
            VStack {
                Spacer()
                HStack {
                    Button {
                        // 使用地图当前中心点作为查询中心，可替换为用户实际位置
                        locationsViewModel.fetchNearbyLocations(center: mapViewModel.region.center)
                    } label: {
                        Image(systemName: "location")
                            .padding()
                            .background(Color.white)
                            .clipShape(Circle())
                            .shadow(radius: 3)
                    }
                }
                .padding(.bottom, 20)
            }
        }
    }
}

// 地图视图模型，根据实际需求调整
class MapViewModel: ObservableObject {
    @Published var region: MKCoordinateRegion = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 37.334722, longitude: -122.008889),
        span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05)
    )
}

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