React Native Expo跳转后Firebase collection()首参数报错排查

错误根本原因 #

Firebase JS SDK 新旧API混用不兼容：

• 你的firebase.js配置使用v8及更早版本的compat兼容层语法初始化服务，导出的db是兼容层封装的Firestore实例
• SetupScreen.js中调用的doc()、setDoc()是v9+版本原生模块化API提供的方法，这类方法仅接受v9原生初始化生成的Firestore实例，无法识别兼容层返回的实例对象，因此抛出「第一个参数类型不符合要求」的错误。

你观察到的「直接将SetupScreen设为启动页写入正常」是Metro打包器缓存导致的临时现象，清理缓存重新打包后会稳定复现错误，并非代码逻辑本身正确。

可选修复方案 #

方案1：统一使用Compat兼容层写法（改动量最小） #

不需要调整现有Firebase初始化逻辑，仅修改SetupScreen的Firestore调用代码即可：

1. 删除SetupScreen中从@firebase/firestore导入doc/setDoc的语句
2. 将handleSetUp方法中的写入逻辑替换为兼容层写法：

const handleSetUp = async() => {
  await db.collection('users').doc('sometext').set({
    username: username,
    name: name,
    age: age,
    city: city,
    country: country,
    movie: movie
  });
}

方案2：全量升级为v9+ 模块化写法（官方推荐，包体积更小、运行性能更好） #

统一所有Firebase相关代码为v9模块化语法，彻底解决版本兼容问题：

1. 重写firebase.js配置文件的初始化逻辑：

// 替换原有compat系列导入
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

// 原firebaseConfig配置内容保持不变
const firebaseConfig = {
  // 你的配置参数
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);

export { db, auth };

2. 调整SignupScreen.js中的鉴权调用逻辑适配v9语法：

// 新增v9鉴权方法导入
import { createUserWithEmailAndPassword } from 'firebase/auth';

const handleSignUp = async() => {
  try {
    const userCredentials = await createUserWithEmailAndPassword(auth, email, password)
    const user = userCredentials.user
    navigation.navigate('Setup');
  } catch (error) {
    // 原有错误提示逻辑保持不变
    if (error.code == "auth/email-already-in-use") {
      alert("The email address is already in use");
    } else if (error.code == "auth/invalid-email") {
      alert("The email address is not valid");
    } else if (error.code == "auth/weak-password") {
      alert("The password must be 6 characters long or more");
    }
  }
}

3. SetupScreen中已有的doc/setDoc导入和调用逻辑不需要修改，确认db是从更新后的firebase.js导入即可正常运行。

其他待修复的代码问题 #

以下问题不会触发当前Firebase错误，但会引发路由、语法类报错，建议一并修复：

• StackNavigator.js中NavigationScreen对应的Screen组件缺少属性赋值等号，将<Stack.Screen name="Navigation" component {NavigationScreen}/>修改为<Stack.Screen name="Navigation" component={NavigationScreen}/>
• SignupScreen.js文件末尾存在多余的闭合括号)，直接删除即可。

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