React Native集成Firebase v9.14.0遇TypeError报错求助

错误原因 #

核心问题是Cart.js中Firebase的导入和调用方式与firebase.js的compat初始化模式不匹配：

• firebase.js里用了Firebase v9的兼容模式（compat路径）初始化并导出了db实例，但Cart.js直接导入非兼容模式的firebase/app，且未导入对应的Firestore兼容模块，导致firebase.firestore()返回undefined。

修复步骤及代码示例 #

1. 修正Cart.js的导入逻辑

直接复用firebase.js中已初始化好的db实例，无需重新创建：

// Cart.js
import React, { useState } from "react";
import { StyleSheet } from "react-native";
import { View, Text, TouchableOpacity, Modal } from "react-native";
import { useSelector } from "react-redux";
import OrderCheckoutList from "./OrderCheckoutList";
// 导入firebase.js中已导出的db，以及compat版本的firebase用于获取FieldValue
import { db } from "./firebase"; // 注意路径要与你的firebase.js文件位置匹配
import firebase from "firebase/compat/app";
import "firebase/compat/firestore";

2. 调整订单添加函数

使用导入的db实例，同时确保items变量已正确定义（示例中从Redux获取）：

// Cart.js中的addOrderToFirebase函数
const addOrderToFirebase = () => {
  // 从Redux获取购物车商品数据，根据你的实际Redux结构调整
  const items = useSelector(state => state.cart.items);
  
  db.collection("orders").add({
    items: items,
    createdAt: firebase.firestore.FieldValue.serverTimestamp(),
  })
  .then(() => {
    console.log("订单已成功添加到Firestore");
    // setModalVisible(false);
  })
  .catch(error => {
    console.error("添加订单失败：", error);
  });
};

3. 额外检查点

• 确认firebase.js中的firebaseConfig已正确填写所有字段；
• 确保项目已安装指定版本的Firebase依赖：npm install firebase@9.14.0 或 yarn add firebase@9.14.0；
• 若使用Redux，确保items变量能正确获取到购物车数据。

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