KMP项目中为wasmJs模块添加Firebase依赖的问题求助

一、Firebase Web端（WasmJS）正确集成步骤 #

1. Gradle配置（build.gradle.ktx） #

• 首先添加GitLive Firebase插件到项目根或模块的plugins块：

  plugins {
      id("dev.gitlive.firebase") version "1.13.0"
      // 其他必填插件如kotlin("multiplatform")等
  }
  

• 分平台配置依赖，避免仅在commonMain添加导致Web端缺失实现：

  kotlin {
      sourceSets {
          val commonMain by getting {
              dependencies {
                  implementation("dev.gitlive:firebase-firestore:1.13.0")
              }
          }
          val wasmJsMain by getting {
              dependencies {
                  implementation("dev.gitlive:firebase-firestore-wasm-js:1.13.0")
                  implementation(npm("firebase", "10.12.2")) // 显式指定npm依赖版本
              }
          }
      }
  }
  

2. Firebase初始化（WasmJS端） #

Web端需单独初始化Firebase，在wasmJsMain下创建初始化函数：

import dev.gitlive.firebase.Firebase
import dev.gitlive.firebase.initializeApp
import kotlinx.browser.window

fun initFirebase() {
    val firebaseConfig = js("""
        {
            apiKey: "你的API_KEY",
            authDomain: "你的AUTH_DOMAIN",
            projectId: "你的PROJECT_ID",
            storageBucket: "你的STORAGE_BUCKET",
            messagingSenderId: "你的SENDER_ID",
            appId: "你的APP_ID"
        }
    """)
    Firebase.initializeApp(firebaseConfig)
}

在Web端入口（如index.kt）调用initFirebase()，确保在使用Firestore前完成初始化。

3. 通用Firestore调用（CommonMain） #

在commonMain中编写跨平台的数据获取逻辑：

import dev.gitlive.firebase.firestore.FirebaseFirestore
import dev.gitlive.firebase.firestore.collection
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.withContext

// 数据模型类
data class Item(val id: String, val name: String)

class FirestoreDataSource {
    private val db = FirebaseFirestore.getInstance()

    suspend fun getTop10Items(): List<Item> = withContext(Dispatchers.Default) {
        val snapshot = db.collection("items").limit(10).get()
        snapshot.documents.map { doc ->
            Item(
                id = doc.id,
                name = doc.get("name") as String
            )
        }
    }
}

4. 解决npm模块找不到问题 #

• 确保项目根目录存在package.json，无则执行npm init -y生成
• 执行./gradlew clean清理缓存后重新同步Gradle
• 确认Gradle版本≥8.5，低版本对WasmJS的npm依赖支持不完善

二、小型数据库替代方案 #

如果仅需2-3张表、获取10条数据的简单需求，以下方案更轻量化：

1. SQLDelight + SQL.js（跨平台） #

基于SQLite的跨平台方案，Web端通过SQL.js运行：

• Gradle配置：

  plugins {
      id("app.cash.sqldelight") version "2.0.1"
  }
  
  kotlin {
      sourceSets {
          val commonMain by getting {
              dependencies {
                  implementation("app.cash.sqldelight:runtime:2.0.1")
              }
          }
          val wasmJsMain by getting {
              dependencies {
                  implementation("app.cash.sqldelight:sqljs-driver:2.0.1")
                  implementation(npm("sql.js", "1.10.0"))
              }
          }
      }
  }
  
  sqldelight {
      databases {
          create("AppDatabase") {
              packageName.set("com.yourpackage.db")
          }
      }
  }
  

• 编写SQL schema（commonMain/sqldelight/com/yourpackage/db/AppDatabase.sq）：

  CREATE TABLE items (
      id TEXT PRIMARY KEY,
      name TEXT NOT NULL
  );
  
  SELECT * FROM items LIMIT 10;
  

• 数据调用：

  import app.cash.sqldelight.driver.sqljs.JsSqlite
  import app.cash.sqldelight.sqljs.SqljsDriver
  import com.yourpackage.db.AppDatabase
  
  class SqlDelightDataSource {
      private val driver = SqljsDriver(JsSqlite())
      private val db = AppDatabase(driver)
  
      fun getTop10Items(): List<Item> {
          return db.itemsQueries.selectTop10().executeAsList()
      }
  }
  

2. Web LocalStorage（仅Web端） #

无需后端，直接用浏览器本地存储：

import kotlinx.browser.localStorage
import kotlinx.serialization.encodeToString
import kotlinx.serialization.json.Json

// 序列化存储
fun saveItems(items: List<Item>) {
    localStorage.setItem("items", Json.encodeToString(items))
}

// 读取数据
fun getTop10Items(): List<Item> {
    val json = localStorage.getItem("items") ?: return emptyList()
    return Json.decodeFromString<List<Item>>(json).take(10)
}

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