SwiftUI .onAppear未更新@State变量，Firebase图片无法显示

核心问题：异步操作的错误处理 #

你的getDownloadURl()函数是同步返回数组，但Firebase的listAll和downloadURL都是异步闭包操作——函数执行完返回时，闭包里的代码还没开始运行，所以返回的photoURLS是空数组，赋值给photos后，后续闭包里添加元素也不会触发SwiftUI的视图更新，因为没有在正确时机修改@State变量。

其他潜在问题 #

• 用String(describing: item)获取存储路径是错误的，这会得到对象的描述字符串而非真实的GS路径，应该直接使用item这个reference来获取下载链接，不需要重新创建gsReference。
• 强制解包result!会导致程序在获取存储列表失败时崩溃，应该用可选绑定做安全处理。
• AsyncImage只处理了成功获取图片的情况，缺少加载中和加载失败的状态提示，不利于调试。

修复后的完整代码 #

import SwiftUI
import FirebaseStorage

struct GalleryView: View {
    @State var photos = [String]()
    
    // 改为异步获取逻辑，完成后更新State
    func fetchPhotos() {
        let storageReference = Storage.storage().reference().child("images/")
        
        storageReference.listAll { result, error in
            if let error = error {
                print("获取存储列表失败：\(error)")
                return
            }
            
            guard let items = result?.items else { return }
            var fetchedURLs = [String]()
            
            // 用DispatchGroup等待所有异步请求完成
            let group = DispatchGroup()
            
            for item in items {
                group.enter()
                item.downloadURL { url, error in
                    defer { group.leave() }
                    
                    if let error = error {
                        print("获取下载链接失败：\(error)")
                        return
                    }
                    
                    if let urlString = url?.absoluteString {
                        fetchedURLs.append(urlString)
                    }
                }
            }
            
            // 所有请求完成后，在主线程更新State（必须在主线程修改UI相关变量）
            group.notify(queue: .main) {
                photos = fetchedURLs
                print("获取到的图片链接：\(photos)")
            }
        }
    }
    
    var body: some View {
        NavigationView {
            ScrollView {
                LazyVGrid(columns: [
                    GridItem(.fixed(100)),
                    GridItem(.fixed(100)),
                    GridItem(.fixed(100))
                ], spacing: 12) {
                    ForEach(photos, id: \.self) { photoURL in
                        HStack {
                            Spacer()
                            AsyncImage(url: URL(string: photoURL)) { phase in
                                switch phase {
                                case .empty:
                                    // 加载中显示占位符
                                    ProgressView()
                                        .frame(width: 124, height: 124)
                                case .success(let image):
                                    image
                                        .resizable()
                                        .scaledToFill()
                                        .frame(width: 124, height: 124)
                                        .clipped()
                                case .failure:
                                    // 加载失败显示占位图标
                                    Image(systemName: "photo.badge.exclamationmark")
                                        .font(.largeTitle)
                                        .frame(width: 124, height: 124)
                                @unknown default:
                                    EmptyView()
                                }
                            }
                            Spacer()
                        }
                        .padding()
                        .background(Color.red)
                    }
                }
            }
            .navigationTitle("Gallery")
            .onAppear {
                fetchPhotos()
            }
        }
    }
}

关键修复点说明 #

• 将getDownloadURl()改为fetchPhotos()，不再同步返回数组，而是通过DispatchGroup等待全部下载链接获取完毕，再在主线程更新@State变量photos，触发视图刷新。
• 直接使用item.downloadURL获取链接，避免错误的reference创建方式。
• 给AsyncImage添加了加载中、加载失败的状态，方便调试和提升用户体验。
• 移除了强制解包，改用可选绑定和安全处理，避免程序崩溃。

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