SwiftUI Firebase实现带用户头像的消息列表求助

现有代码核心问题 #

1. Storage路径初始化错误：类初始化时生成固定UUID路径，导致每次上传都使用无效的固定路径，正确做法是上传时动态生成对应资源的路径。
2. 异步代码混用：同时使用async/await和闭包回调，导致逻辑混乱且易出错，Firebase 9+支持完整的async/await API，应统一使用。
3. UI缺失核心交互：没有消息输入框、头像选择按钮和发送按钮，无法完成消息提交流程。
4. 消息项布局错误：List中错误调用posts.description（数组的描述字符串），且未实现头像+消息的HStack布局。

修正后的完整实现 #

1. Post 数据模型 #

需实现Identifiable和Codable，绑定Firestore文档ID并关联用户信息：

import Foundation
import FirebaseFirestoreSwift
import FirebaseAuth

struct Post: Identifiable, Codable {
    @DocumentID var id: String?
    var description: String
    var datePublished: Date
    var imageURL: String?
    var userId: String? { Auth.auth().currentUser?.uid }
}

2. ViewModel 逻辑优化 #

统一使用async/await处理异步操作，优化Storage路径生成，实现消息发送和列表获取逻辑：

import Foundation
import FirebaseStorage
import FirebaseFirestore
import FirebaseAuth

class PostViewModel: ObservableObject {
    @Published var posts = [Post]()
    @Published var selectedImageData: Data? // 存储选中的头像数据
    private let db = Firestore.firestore().collection("Posts")
    
    // 实时监听消息列表
    func fetchPosts() {
        db.order(by: "datePublished", descending: true)
            .addSnapshotListener { [weak self] snapshot, error in
                guard let documents = snapshot?.documents else {
                    print("获取消息失败: \(error?.localizedDescription ?? "未知错误")")
                    return
                }
                self?.posts = documents.compactMap { try? $0.data(as: Post.self) }
            }
    }
    
    // 上传头像并保存消息到Firestore
    func sendPost(description: String) async {
        guard !description.isEmpty, let userId = Auth.auth().currentUser?.uid else { return }
        
        var imageURL: String? = nil
        // 若选中图片则上传到Storage
        if let imageData = selectedImageData {
            let storageRef = Storage.storage().reference()
                .child("users/\(userId)/avatars/\(UUID().uuidString).jpg")
            
            do {
                try await storageRef.putDataAsync(imageData)
                let downloadURL = try await storageRef.downloadURL()
                imageURL = downloadURL.absoluteString
            } catch {
                print("上传头像失败: \(error.localizedDescription)")
                return
            }
        }
        
        // 保存消息到Firestore
        let post = Post(description: description, datePublished: Date(), imageURL: imageURL)
        do {
            try await db.addDocument(from: post)
            selectedImageData = nil // 清空选中的图片
        } catch {
            print("保存消息失败: \(error.localizedDescription)")
        }
    }
}

3. View 层 UI 实现 #

完成消息列表、输入区域、图片选择器的布局，实现头像+消息的HStack样式：

import SwiftUI
import FirebaseFirestoreSwift

struct PostView: View {
    @ObservedObject var viewModel = PostViewModel()
    @State private var messageText = ""
    @State private var showImagePicker = false
    
    var body: some View {
        VStack(spacing: 10) {
            // 消息列表
            List(viewModel.posts) { post in
                MessageRow(post: post)
            }
            .listStyle(.plain)
            .frame(maxHeight: .infinity)
            
            // 输入操作栏
            HStack(spacing: 8) {
                // 头像选择按钮
                Button {
                    showImagePicker = true
                } label: {
                    if let imageData = viewModel.selectedImageData, let image = UIImage(data: imageData) {
                        Image(uiImage: image)
                            .resizable()
                            .scaledToFill()
                            .frame(width: 40, height: 40)
                            .clipShape(Circle())
                    } else {
                        Image(systemName: "person.circle")
                            .font(.title)
                    }
                }
                
                // 消息输入框
                TextField("输入消息...", text: $messageText)
                    .textFieldStyle(.roundedBorder)
                
                // 发送按钮
                Button {
                    Task {
                        await viewModel.sendPost(description: messageText)
                        messageText = ""
                    }
                } label: {
                    Image(systemName: "paperplane.fill")
                        .font(.title)
                }
                .disabled(messageText.isEmpty)
            }
            .padding(.horizontal)
            .padding(.bottom, 10)
        }
        .sheet(isPresented: $showImagePicker) {
            ImagePicker(selectedImageData: $viewModel.selectedImageData)
        }
        .onAppear {
            viewModel.fetchPosts()
        }
    }
}

// 消息行组件：头像+消息内容布局
struct MessageRow: View {
    let post: Post
    
    var body: some View {
        HStack(alignment: .top, spacing: 12) {
            // 用户头像
            if let imageURL = post.imageURL, let url = URL(string: imageURL) {
                AsyncImage(url: url) { phase in
                    switch phase {
                    case .success(let image):
                        image.resizable()
                            .scaledToFill()
                            .frame(width: 44, height: 44)
                            .clipShape(Circle())
                    case .failure, .empty:
                        Image(systemName: "person.circle")
                            .font(.title)
                    @unknown default:
                        Image(systemName: "person.circle")
                    }
                }
            } else {
                Image(systemName: "person.circle")
                    .font(.title)
            }
            
            // 消息内容与时间
            VStack(alignment: .leading, spacing: 4) {
                Text(post.description)
                    .font(.body)
                Text(post.datePublished.formatted(date: .abbreviated, time: .shortened))
                    .font(.caption)
                    .foregroundColor(.gray)
            }
            
            Spacer()
        }
        .padding(.vertical, 4)
    }
}

// 图片选择器组件
struct ImagePicker: UIViewControllerRepresentable {
    @Binding var selectedImageData: Data?
    @Environment(\.dismiss) var dismiss
    
    func makeUIViewController(context: Context) -> UIImagePickerController {
        let picker = UIImagePickerController()
        picker.sourceType = .photoLibrary
        picker.delegate = context.coordinator
        return picker
    }
    
    func updateUIViewController(_ uiViewController: UIImagePickerController, context: Context) {}
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
        let parent: ImagePicker
        
        init(_ parent: ImagePicker) {
            self.parent = parent
        }
        
        func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
            if let image = info[.originalImage] as? UIImage {
                if let compressedData = image.jpegData(compressionQuality: 0.5) {
                    parent.selectedImageData = compressedData
                }
            }
            parent.dismiss()
        }
    }
}

关键优化说明 #

1. Storage路径规范：按users/{userId}/avatars/{UUID}.jpg格式生成路径，确保每个用户的头像存储在专属目录，避免资源冲突。
2. 异步逻辑简化：使用Firebase官方的async/await API替代闭包回调，减少嵌套逻辑，提升代码可读性。
3. UI适配：自定义MessageRow组件实现响应式布局，头像使用圆形裁剪，消息内容自适应宽度，时间用灰色小字区分。
4. 用户体验优化：添加图片压缩、按钮状态禁用（空消息无法发送）、头像加载状态处理等细节。

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