Firestore数据在SwiftUI中显示异常：返回数量正确但重复展示同一条目问题的排查与修复

我来帮你解决这两个Firestore数据展示的问题，这俩都是SwiftUI+Firestore开发里的常见踩坑点，咱们一步步来修复：

问题1：Firestore仅返回单个数据项/所有条目显示重复内容（ID唯一性问题） #

问题根源 #

你的RecipesViewModel里获取文档ID时用了d["id"]，但如果你的Firestore文档ID是系统自动生成的（而非自定义存在字段中的id），这个取值会是空字符串。SwiftUI的ForEach依赖**唯一的id**来区分不同视图，当所有条目ID相同时，它会复用最后一个视图，最终看起来就只有一条数据，或者所有条目都是重复内容。

修复方案 #

把获取ID的代码改成直接取Firestore文档的documentID：

// 修改RecipesViewModel中的getData方法
func getData() {
    let db = Firestore.firestore()
    db.collection("Recipes").getDocuments { snapshot, error in
        if error == nil {
            if let snapshot = snapshot {
                DispatchQueue.main.async {
                    self.Recipes = snapshot.documents.map { d in
                        return RecipesData(
                            id: d.documentID, // 替换原来的d["id"]
                            name: d["name"] as? String ?? "",
                            cuisine: d["cuisine"] as? String ?? "",
                            difficulty: d["difficulty"] as? String ?? "",
                            dishType: d["dishType"] as? String ?? "",
                            prepMins: d["prepMins"] as? Int ?? 0,
                            prepHours: d["prephours"] as? Int ?? 0,
                            cookMins: d["cookMins"] as? Int ?? 0,
                            cookHours: d["cookHours"] as? Int ?? 0,
                            restMins: d["restMins"] as? Int ?? 0,
                            restHours: d["restHours"] as? Int ?? 0,
                            likes: d["likes"] as? Int ?? 0,
                            imageURL: d["imageURL"] as? String ?? ""
                        )
                    }
                }
            }
        }
    }
}

问题2：嵌套遍历导致重复渲染（CardButton逻辑错误） #

问题根源 #

你的PopularRecipes和AllPopular已经在遍历model.Recipes了，但CardButton内部又做了一次ForEach(model.Recipes)，这就导致每个原本应该展示单个条目的位置，渲染了所有菜谱数据，最终视觉上全是重复内容（通常是最后一条）。

修复方案 #

让CardButton接收单个RecipesData实例作为参数，移除内部的ForEach，直接用传入的条目数据构建视图：

1. 修改CardButton代码

struct CardButton:View{
    let recipe: RecipesData // 新增参数接收单个菜谱
    @State var presented: Bool = false
    
    var body: some View{
        Button {
            presented.toggle()
        } label: {
            CardView(recipe: recipe) // 给CardView传入单个菜谱
        }
        .fullScreenCover(isPresented: $presented) {
            Recipe(
                name: recipe.name, 
                cuisine: recipe.cuisine, 
                difficulty: recipe.difficulty, 
                dishType: recipe.dishType, 
                prepMins: recipe.prepMins, 
                prepHours: recipe.prepHours, 
                cookMins: recipe.cookMins, 
                cookHours: recipe.cookHours, 
                restMins: recipe.restMins, 
                restHours: recipe.restHours, 
                likes: recipe.likes, 
                imageURL: recipe.imageURL
            )
        }
    }
}

2. 修改CardView代码

让它直接使用传入的单个菜谱数据，不再依赖EnvironmentObject遍历：

struct CardView: View {
    let recipe: RecipesData // 接收单个菜谱
    var body: some View {
        VStack{
            ZStack(alignment: .bottomTrailing){
                WebImage(url: URL(string: recipe.imageURL))
                    .resizable()
                    .scaledToFit()
                    .cornerRadius(8)
                    .frame(width: 150, height: 150)
                HStack{
                    Text("\(recipe.likes)")
                    Image(systemName: "heart")
                }
                .foregroundColor(Color(hex: "FF0044"))
                .padding(5)
                .background(.white)
                .cornerRadius(8)
                .padding(7)
            }
            Text(recipe.name)
                .foregroundColor(.black)
                .fontWeight(.medium)
                .font(.system(size: 20))
                .padding(.top)
            HStack{
                Image(systemName: "clock")
                    .foregroundColor(.gray)
                Text("\(recipe.prepMins) mins")
                    .foregroundColor(.gray)
            }
            .padding(5)
            .padding(.trailing)
        }
    }
}

3. 修改调用CardButton的地方

在PopularRecipes和AllPopular的遍历中，给CardButton传入当前条目：

// PopularRecipes中的遍历
ForEach(model.Recipes, id: \.id) {item in
    CardButton(recipe: item)
        .padding(.horizontal)
}

// AllPopular中的遍历
ForEach(model.Recipes, id: \.id) { item in
    CardButton(recipe: item)
}

完成以上两个修改后，Firestore返回的所有数据都会正确显示，每个条目都是独立的内容，不会再出现重复或者只显示一条的问题。

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