有人可以帮我吗 - FirebaseError：collection() 的第一个参数应该是 CollectionReference、DocumentReference 或 FirebaseFirestore？

Question

这是我得到的错误：

[Unhandled promise rejection: FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore]
at http://192.168.0.25:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:204784:321 in _createSuperInternal
at node_modules/@firebase/firestore/node_modules/@firebase/util/dist/index.esm2017.js:791:8 in FirebaseError#constructor
at http://192.168.0.25:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:181904:321 in _createSuperInternal
at node_modules/@firebase/firestore/dist/index.rn.js:370:8 in j#constructor
at node_modules/@firebase/firestore/dist/index.rn.js:16757:57 in <global>
at screens/SetupScreen.js:20:23 in handleSetUp
at screens/SetupScreen.js:19:24 in handleSetUp
at node_modules/react-native/Libraries/Pressability/Pressability.js:702:17 in _performTransitionSideEffects
at node_modules/react-native/Libraries/Pressability/Pressability.js:639:6 in _receiveSignal
at node_modules/react-native/Libraries/Pressability/Pressability.js:520:8 in responderEventHandlers.onResponderRelease

这是我的 firebase.js 文件：

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

...

let app;

if (firebase.apps.length === 0) {
  app = firebase.initializeApp(firebaseConfig)
} else {
  app = firebase.app();
}

const db = app.firestore();
const auth = firebase.auth();

export { db, auth };

这是我的 StackNavigator.js 文件：

import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import WelcomeScreen from './screens/WelcomeScreen';
import SignupScreen from './screens/SignupScreen'
import LoginScreen from './screens/LoginScreen';
import NavigationScreen from './screens/NavigationScreen';
import SetupScreen from './screens/SetupScreen';

const Stack = createNativeStackNavigator();

const StackNavigator = () => {

  return (
      <Stack.Navigator>
       <Stack.Screen name="Welcome" component={WelcomeScreen} />
          <Stack.Screen name="Login" component={LoginScreen} />
          <Stack.Screen name="Signup" component={SignupScreen} />
          <Stack.Screen name="Setup" component={SetupScreen} />
          <Stack.Screen name="Navigation" component {NavigationScreen}/>

      </Stack.Navigator>  )
}

export default StackNavigator

这是我的 SignUpScreen.js 文件：

import { View, Text, Image, StyleSheet, KeyboardAvoidingView, TextInput, TouchableOpacity, StatusBar} from 'react-native'
import React, { useState } from 'react'
import { useNavigation } from '@react-navigation/native'
import { auth } from '../firebase'

const LoginScreen = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const incompleteForm = !email || !password

  const navigation = useNavigation();

  const handleSignUp = async() => {
    auth
    .createUserWithEmailAndPassword(email, password)
    .then(userCredentials => { 
      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");
      }
    })
  }

  return (
    <KeyboardAvoidingView style = {styles.container} behavior = 'padding'>
      <StatusBar barStyle="light-content" translucent={true} />

      <View style={styles.imageContainer}>
        <Image source={require('../assets/pop.png')} style={styles.image}/>
      </View>       
      <View style = {styles.inputContainer}>
        <TextInput 
          placeholder = 'Email'
          value = {email}
          onChangeText = {text => setEmail(text)}
          style = {styles.input}
          autoCapitalize = 'none'
          autoCorrect = {false}
        />
        <TextInput 
          placeholder = 'Password'
          value = {password}
          onChangeText = {text => setPassword(text)}
          style = {styles.input}
          secureTextEntry
        />
      </View>

      <View>
        <TouchableOpacity onPress = {handleSignUp}>
          <Text>Sign Up</Text>
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
  )
}

export default LoginScreen
)

这是我的 SetUpScreen.js 文件：

import { View, Text, StyleSheet, TextInput, TouchableOpacity, StatusBar} from 'react-native'
import React, { useState } from 'react'
import { useNavigation } from '@react-navigation/native'
import { auth, db } from '../firebase'
import { doc, setDoc} from '@firebase/firestore'

const SetupScreen = () => {
    const [username, setUsername] = useState('')
    const [name, setName] = useState('')
    const [age, setAge] = useState('')
    const [city, setCity] = useState('')
    const [country, setCountry] = useState('')
    const [movie, setMovie] = useState('')
  
    const navigation = useNavigation();

    const handleSetUp = async() => {
          await setDoc(doc(db, 'users', 'sometext'), {
            username: username,
            name: name,
            age: age,
            city: city,
            country: country,
            movie: movie
          });
      }
  
    return (
      <View>  

        <View>
          <TextInput 
            placeholder = 'Username'
            value = {username}
            onChangeText = {text => setUsername(text)}
            style = {styles.input}
            autoCorrect = {false}
            maxLength={10}
          />
          <View>
          <View>
          <TextInput 
            placeholder = 'Name'
            value = {name}
            onChangeText = {text => setName(text)}
            style = {styles.name}
            autoCorrect = {false}
            maxLength={10}
          />
          </View>
          <View>
           <TextInput 
            placeholder = 'Age'
            value = {age}
            onChangeText = {text => setAge(text)}
            style = {styles.age}
            autoCorrect = {false}
            keyboardType = 'numeric'
            maxLength={2}
          />
          </View>
          </View>
          <View>
            <View>
              <TextInput 
            placeholder = 'City'
            value = {city}
            onChangeText = {text => setCity(text)}
            style = {styles.city}
            autoCorrect = {false}
            autoCapitalize = 'words'
          />
            </View>
            <View>
            <TextInput 
            placeholder = 'Country'
            value = {country}
            onChangeText = {text => setCountry(text)}
            style = {styles.country}
            autoCorrect = {false}
            autoCapitalize = 'words'
          />
            </View>
          </View>
          <TextInput 
            placeholder = 'Favorite movie'
            value = {movie}
            onChangeText = {text => setMovie(text)}
            style = {styles.input}
            autoCapitalize = 'words'
            autoCorrect = {false}
          />

        <View>
          <TouchableOpacity onPress = {handleSetUp}>
            <Text>Create profile</Text>
          </TouchableOpacity>
        </View>
      </View>
      </View>
    )
}

export default SetupScreen

如果我注释掉 WelcomeScreen 和 SignUpScreen 并在 SetUpScreen 上启动应用程序，则用户会显示在代码创建的集合中，但是当我从 SignUpScreen 导航到它时，就会出现错误。 有人可以帮我弄清楚吗？

Answer 1

在根目录中创建一个名为 metro.config.js 的文件并将以下代码粘贴到该文件中重新加载整个应用程序。 也许会有所帮助

const { getDefaultConfig } = require("@expo/metro-config");

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.assetExts.push("cjs");

module.exports = defaultConfig;