如何为Flutter移动端与Angular网站复用Firebase查询逻辑？

方案一：基于Firebase Cloud Functions封装统一接口 #

• 将所有Firestore的CRUD、数据查询逻辑统一编写在Firebase Cloud Functions中，封装成Callable函数或HTTP接口
• Flutter端通过FirebaseFunctions.instance.httpsCallable('函数名').call(参数)调用；Angular端使用firebase.functions().httpsCallable('函数名')(参数)调用
• 示例：

  // Cloud Functions中的Callable函数
  exports.getUserData = functions.https.onCall(async (data, context) => {
    const userId = data.userId;
    const userDoc = await admin.firestore().collection('users').doc(userId).get();
    return userDoc.data();
  });
  

• 优势：逻辑集中维护，可统一添加权限校验、数据过滤、格式转换等逻辑，避免前端直接操作Firestore暴露敏感数据结构

方案二：构建跨端共享的逻辑库 #

两种实现路径： #

• TypeScript库复用：编写独立的TS库（可发布为npm包），封装所有Firestore请求函数（如fetchUserPosts、updateProfile）。Angular直接安装调用；Flutter端通过flutter_js插件或WebAssembly调用该JS库（若为Flutter Web则直接用JS互操作）
• Dart逻辑转译：用Dart编写核心Firestore操作逻辑，通过dart2js编译成JS库供Angular调用，Flutter端直接使用Dart代码
• 优势：核心逻辑仅需编写一次，两端直接复用，减少重复开发成本

方案三：基于Firestore REST API封装统一请求工具 #

• 直接使用Firestore官方REST API，为Flutter和Angular分别封装结构一致的请求工具类，统一处理认证头、参数序列化、响应解析等逻辑
• 示例：

  // Flutter端封装的请求工具
  Future<Map<String, dynamic>> fetchUser(String userId) async {
    final response = await http.get(
      Uri.parse('https://firestore.googleapis.com/v1/projects/项目ID/databases/(default)/documents/users/$userId'),
      headers: {'Authorization': 'Bearer ${await FirebaseAuth.instance.currentUser?.getIdToken()}'},
    );
    return jsonDecode(response.body);
  }
  

  // Angular端封装的请求工具
  async fetchUser(userId: string): Promise<any> {
    const idToken = await firebase.auth().currentUser?.getIdToken();
    const response = await this.http.get(`https://firestore.googleapis.com/v1/projects/项目ID/databases/(default)/documents/users/${userId}`, {
      headers: { 'Authorization': `Bearer ${idToken}` }
    }).toPromise();
    return response;
  }
  

• 优势：无需额外后端服务，直接依托Firebase原生能力，适合逻辑简单的场景

方案四：引入GraphQL中间层 #

• 在Firestore之上搭建GraphQL服务（如使用Apollo Server或Hasura），将Firestore的操作映射为GraphQL的查询和突变
• Flutter和Angular均使用Apollo Client调用统一的GraphQL接口，实现数据请求逻辑的复用
• 优势：统一数据查询语言，自带缓存、数据聚合等能力，适合复杂数据交互场景

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