Value of type '[UserProfileData]' has no member 'username'

Question

I am trying to display some text (username) that I get from the firestore but I get this error Value of type '[UserProfileData]' has no member 'username'

I am unsure as to why I get this error as my view model should have that data in it

here is my view code

import SwiftUI


struct Profile: View {
    
    @EnvironmentObject var viewRouter: ViewRouter
    
    @ObservedObject var ViewModel = UsersModel()
    
    var body: some View {
        NavigationView{
            ScrollView{
                VStack{
                    HStack{
                        Text("")
                            .padding(.leading, 20)
                        Spacer()
                        
                        
                    }
                    .padding(.trailing, 40)
                    
                    .font(.system(size: 30))
                    .padding(.top, 30)
                    
                    if let user = ViewModel.userData.self{
                        Text(user.username)
                    }
                      
                        Followers()
                            .padding(.top)
                        Bio()
                            .padding(.bottom, 10)
                            .padding(.top, -10)
                        Spacer()
                        Button {
                            print("Image tapped!")
                        } label: {
                            ZStack{
                                
                                RoundedRectangle(cornerRadius: 8)
                                    .frame(width: 300, height: 50)
                                    .foregroundColor(Color.white)
                                    .border(.black)
                                Text("Edit Profile")
                                    .foregroundColor(Color.black)
                            }
                            .padding(.top)
                            
                            
                        }
                        Spacer()
                        
                    }
                    
                    
                }
                .navigationBarTitle("")
                .navigationBarHidden(true)
                .onAppear(perform: self.ViewModel.fetchData)
                
            }
            
        }
    }


struct Followers: View{
    var body: some View{
        
        VStack{
            Circle()
                .stroke()
                .frame(height: 75)
            HStack{
                Spacer()
                VStack {
                    Text("100")
                        .font(Font.title.weight(.regular))
                        .font(.system(size: 15))
                        .padding()
                    Text("Posts")
                    
                }
                .padding()
                VStack {
                    Text("10K")
                        .font(Font.title.weight(.regular))
                        .font(.system(size: 15))
                        .padding()
                    Text("Followers")
                }
                .padding()
                VStack {
                    Text("250")
                        .font(Font.title.weight(.regular))
                        .font(.system(size: 15))
                        .padding()
                    Text("Following")
                }
                .padding()
                Spacer()
                
            }
            .padding()
            
            
        }
        
    }
}


struct Bio: View{
    var body: some View{
        VStack{
            HStack{
                Spacer()
                Text("Bio")
                    .font(.system(size: 20, weight: .medium))
                    .padding()
                Spacer()
            }
            
            Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna")
                .padding()
        }
        
    }
}

struct Profile_Previews: PreviewProvider {
    static var previews: some View {
        Profile()
            .previewDevice(PreviewDevice(rawValue: "iPhone 13"))
        Profile()
            .previewDevice(PreviewDevice(rawValue: "iPhone 8"))
    }
}

I try to show the data on this line if let user = ViewModel.userData.self{ Text(user.username)}

But I get this error Value of type '[UserProfileData]' has no member 'username'

Here is my UserProfileData struct

import SwiftUI
import FirebaseFirestoreSwift

struct UserProfileData: Identifiable, Codable{
    @DocumentID var id: String?
    var username: String
    var imageURl: URL
}

and here is the code where I get the data

import SwiftUI
import Firebase
import FirebaseFirestore
import FirebaseFirestoreSwift


class UsersModel: ObservableObject {
    
    @Published var userData = [UserProfileData]()
    
    
    private var db = Firestore.firestore()
    
    func fetchData() {
        let userId = Auth.auth().currentUser!.uid
        
        db.collection("users")
            .whereField("uid", isEqualTo: userId)
        
            .addSnapshotListener { (snap, err) in
                
                print("In fetch Diary Data and mapping documents...")
                
                guard let docs = snap else{

                    return
                }
                
                self.userData = docs.documents.compactMap { (queryDocumentSnapshot) -> UserProfileData? in
                    
                    return try? queryDocumentSnapshot.data(as: UserProfileData.self)
                }
            }
        
    }
}

How can I show my data without using a list or a ForEach lopp

Many Thanks

Answer 1

Since you're storing the user data in an array, you will need to either process all elements in that array (as Joakim commented), or access a specific item in the array. Since you say there's only one item in the array, the latter seems easiest:

if let user = ViewModel.userData[0].self{
    Text(user.username)
}

Or:

if let user = ViewModel.userData.self{
    Text(user[0].username)
}