About that HashMap in the debugger view

As mentioned in the comments to your question:

> Hint: the logged inner contents being enclosed in curly braces {} indicates that it's a key-value like structure, and from the inner "object" in the debugger screenshot you would notice that it's actually a HashMap. So you would then access its contents as per a Map's semantics as documented in Kotlin's collections document, for e.g. given a specific list element it would be element["propertyToAccessFromMap"] using the get operator

Firestore likely internally converts key-values and arrays stored in your Firestore document to a Java Map and List respectively (if you don't go the custom data way mentioned later in this answer) rather than as your custom data classes, so you will have to cast the data you get back from Firestore to a Map and List, and likely also write custom logic to manually map them to your desired data classes (as they are not a 1-to-1 replacement, so you cannot just do list2[0].pageId as-is to access a property from a map like you might do in a dynamic language like JavaScript, if you're familiar with that language, where that is how you would do it).

As for getting the data from that Map:

// You will actually need to cast it like this rather than List<SitePagesList>
val sitePages = document.data["sitePages"] as List<Map<String, Any?>

val element = sitePages[0]
// You can then access each key in the key-value map with the `get()` operator function
val pageImage = element["pageImage"]
val thisCanBeNamedAnything = element["pageContent"]
val myId = element["pageId"]

With a for-loop:

for (page in sitePages) {
    val pageImage = element["pageImage"]
    val thisCanBeNamedAnything = element["pageContent"]
    val myId = element["pageId"]
}

The ideal method of parsing the document data

From my comment:

> Also, just a heads-up that you don't need all this code to manually parse the data to your data class equivalent when you could use the toObject extension function on your document snapshot (as documented in the "Custom Object" section of the "Get data" docs) to do it for you

Here's an example of what I meant:

Instead of this code (in your inner getSitesListFromDb lambda call in addOnCompleteListener):

val listOfDocuments = task.result
sitesList.clear()
for (document in listOfDocuments) {
    val sitePages = document.data["sitePages"]      // used to view contents of the arrayList
    @Suppress("UNCHECKED_CAST") val list =      SitesList(
        siteId = document.data["siteId"].toString().toInt(),
        siteImage = document.data["siteImage"].toString().toInt(),
        siteName = document.data["siteName"].toString(),
        sitePages = document.data["sitePages"] as List<SitePagesList>
    )
    sitesList.add(list)
}

This can be simplified down to:

val listOfDocuments = task.result
sitesList.clear()
for (document in listOfDocuments) {
    sitesList.add(document.toObject<SiteList>())
}

Or even further simplified down to (as toObjects also exists for collection snapshots):

sitesList.addAll(listOfDocuments.toObjects<SitesList>())

Aside: Suspending with Kotlin Coroutines

And another nitpick as I mentioned in the comments:

> Another note that you can simplify your code to use Kotlin Coroutines by await()ing each Firestore call that returns a Task (this is what you're actually calling addOnCompleteListener/addOnFailureListener/addOnSuccessListener on) - see https://stackoverflow.com/questions/71585047/how-to-await-task-completion-and-return-a-variable for more information [...]

With await(), you can simplify the callback handling down to this (note that you'll have to run this code within a suspending CoroutineScope):

private suspend fun createOrUpdateSite(site: SitesList) {
    // You would use the standard error catching (try-catch) to catch errors
    // that you would've otherwise caught from addOnFailureListener
    try {
        val document = sitesDb.collection("sites")
            .document(site.siteId.toString())
            .get() // This would return Task<DocumentSnapshot> or similar
            .await() // This gives you an unwrapped version of the result (so DocumentSnapshot)
        if (document.exists()) {
            document.reference.update(site.toMap()).await()
        } else {
            sitesDb.collection("sites")
                .document(site.siteId.toString())
                .set(site)
                .await() // <-- Added await() here too as you seem to be doing a fire-and-forget here
        }
    } catch (e: Exception) {
        // Handle failures here
    }
}

private suspend fun getSitesListFromDb() {
    try {
        val collectionData = sitesDb.collection("sites")
            .get()
            .await() // This already gives you the result data, so no need for another .getResult()/.result call
        sitesList.clear()
        sitesList.addAll(collectionData.toObjects<SitesList>()) // There's probably no need for an explicit generic here, so you might remove it if desired
    } catch (e: Exception) {
        // etc
    }
}

---

Other nitpicks

Immutability and Compose

I would make your variables immutable where desired:

• The mutableStateListOf property here should not be mutable - its contents are mutable, not the container itself

val sites = mutableStateListOf<...>()

• Make the data class properties immutable as Compose cannot identify when an object's properties have changed. If you do intend to modify the data in a list of these objects (or a Compose state of the data) at some point, use the copy() function that data classes have:

data class SitesList(
    val siteId: Int = 0,
    @field:DrawableInt // I would annotate this so that the IDE can pick-up that *only* drawable resources should be used and not just any random integer that isn't a valid resource
    val siteImage: Int = R.drawable.paraglider1,
    val siteName: String = "",
    val sitePages: List<SitePagesList>
)

// To modify an element in the MutableStateList:
val sites = mutableStateListOf<SiteList>()

// If you know the index:
sites[index] = sites[index].copy(siteName = "new value")

// If you don't know the index but have the current object
val existingSite = SiteList(...)
val index = sites.indexOf(existingSite)
sites[index] = sites[index].copy(...)

For Compose state of only a single object:

var site by mutableStateOf<SiteList>(...)
site = site.copy(...)

// Or
val site = mutableStateOf<SiteList>(...)
site.value = site.value.copy(...)

Real-time data

If you want to get real-time updates on your data, you can use the snapshots() extension function available on the Query class (which the FirestoreCollection class extends from) to get the data as a Flow<DocumentSnapshot>:

val siteSnapshots = sitesDb.collection("sites").snapshots()

(See the Kotlin docs on what a Flow is)

Or you can get the data parsed as your data class with the dataObjects<T>() extension function, which expects a generic of the data class that a document in the collection would be using:

val sitesList = sitesDb.collection("sites").dataObjects<SiteList>() // This would then return a Flow<List<SiteList>>

(Internally, dataObjects<T>() is really just snapshots().map { it.toObjects<T>() })

dataObjects<T>() also works with a document reference, but it'll return a Flow<T?>:

val site = sitesDb.collection("sites").document("1").dataObjects<SiteList>() // Returns Flow<SiteList?>
// You can do filterNotNull() if you do desire a non-null instance
val notNullSite = site.filterNotNull() // Flow<SiteList>

You can then collect it as a Compose state with the collectAsState/collectAsStateWithLifecycle extension functions:

// I'm assuming all that code is in a ViewModel
@Composable
fun SitesListScreen(viewModel: SitesListViewModel) {
    val data by viewModel.sitesList.collectAsStateWithLifecycle() // collectAsStateWithLifecycle() returns a State<T> or a State<List<SiteList>> in this case
    // ...
}