如何解决Kotlin(Compose)读取Firebase Firestore数据无法在界面显示的问题？

我正在开发一款从Firebase Firestore读取数据并在界面展示的应用，目前遇到的问题是：数据能在日志中显示，但无法在Text组件以字符串形式呈现。我已经尝试了多个相关视频教程，但都没解决问题，附上我的Kotlin（Jetpack Compose）代码和数据库结构截图，请求帮助实现数据在界面Text组件的正常显示。

数据库结构 #

原代码 #

@SuppressLint("UnrememberedMutableState")
@Composable
fun DB () {
    val db = Firebase.firestore
    val collectionReference = db.collection("Inventário")
        .document("Bloco E")
        .collection("Sala E0.05")

    val data = mutableStateOf(mapOf<String, Any>())
    val job = remember { Job() }

    remember {
        GlobalScope.launch(Dispatchers.Main) {
            val documentSnapshot = collectionReference.document("Computador").get().await()
            try {
                data.value = documentSnapshot.data ?: mapOf()
            }catch (e: Exception){
                Log.e("Firestore", "Error retrieving data", e)
            }

        }
    }

    Column() {
        data.value.forEach { (key, value) ->
            Text("$key: $value")}
    }
}

问题分析与修正方案 #

核心问题 #

1. 状态未被Composable跟踪：val data = mutableStateOf(mapOf<String, Any>())没有用remember包裹，导致Compose无法感知data.value的更新，即使数据获取成功，界面也不会重组刷新。你添加的@SuppressLint("UnrememberedMutableState")只是屏蔽了警告，没有解决根本问题。
2. 协程使用不当：GlobalScope.launch不属于Compose生命周期管理，容易引发内存泄漏，且无法与Composable的生命周期同步。
3. 无用代码冗余：val job = remember { Job() }未被使用，属于无效代码。

修正后的代码 #

@Composable
fun DB() {
    val db = Firebase.firestore
    val collectionReference = db.collection("Inventário")
        .document("Bloco E")
        .collection("Sala E0.05")

    // 用remember包裹状态，让Composable跟踪变化
    val data = remember { mutableStateOf(mapOf<String, Any>()) }

    // 使用LaunchedEffect执行Firestore请求，仅在Composable首次加载时执行一次
    LaunchedEffect(Unit) {
        try {
            val documentSnapshot = collectionReference.document("Computador").get().await()
            data.value = documentSnapshot.data ?: mapOf()
        } catch (e: Exception) {
            Log.e("Firestore", "Error retrieving data", e)
        }
    }

    Column {
        data.value.forEach { (key, value) ->
            Text("$key: $value")
        }
    }
}

关键修改说明 #

• 状态管理修复：通过remember { mutableStateOf(...) }让Composable能够监听data的变化，当数据更新时自动触发界面重组，Text组件就能显示最新数据。
• 协程优化：LaunchedEffect是Compose官方推荐的协程执行方式，会绑定Composable的生命周期，在组件销毁时自动取消协程，避免内存泄漏。Unit作为依赖项表示该协程仅在组件首次组合时执行一次。
• 冗余代码清理：移除了未使用的job变量和不合理的警告抑制注解。

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