iOS设备Expo Go中React Native组件类型无效错误求助

在iOS设备的Expo Go中运行React Native项目时，出现大量组件类型无效错误：提示预期是字符串（内置组件）或类/函数（复合组件），但得到对象，错误定位在App组件的render方法中。

错误日志 #

iOS打包完成 2569ms
错误 警告：React.jsx: 类型无效——预期是字符串（用于内置组件）或类/函数（用于复合组件），但得到：对象。你可能忘记从组件定义的文件中导出它，或者混淆了默认导入和命名导入。
检查App的render方法。
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent)
错误 错误：元素类型无效：预期是字符串（用于内置组件）或类/函数（用于复合组件），但得到：对象。你可能忘记从组件定义的文件中导出它，或者混淆了默认导入和命名导入。
检查App的render方法。
错误位置：
in RCTView (created by View)
in View (created by App)
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent)
（重复错误日志省略）

提供的Fetch组件代码 #

import { View, Text, FlatList, StyleSheet, Pressable } from 'react-native'
import React, { useState, useEffect} from 'react'
import { firebase } from '../config';

const Fetch = () => {

    const [users, setUsers] = useState([]);
    const todoRef = firebase.firestore().collection('todos');

    useEffect(async () => {
            todoRef
            .onSnapshot(
                querySnapshot => {
                    const users = []
                    querySnapshot.forEach((doc) => {
                        const { heading, text } = doc.data()
                        users.push({
                            id: doc.id,
                            heading,
                            text,
                        })

                    })
                    setUsers(users)

                }
            )


    }, [])


  return (
    <View style={{flex:1, marginTop:100}}>

        <FlatList 
                style={{height:'100%'}}
                data={users}
                numColumns={1}
                renderItem={({item}) => (
                    <Pressable
                        style={styles.container}
                    >
                        <View style={styles.innerContainer}>
                            <Text  style={styles.itemHeading}>{item.heading}</Text>
                            <Text  style={styles.itemText}>{item.text}</Text>



                        </View>
                    
                    </Pressable>



                )}
        
        
        />

    </View>
  )
}

export default Fetch

const styles = StyleSheet.create({
    container:{
        backgroundColor:'e5e5e5',
        padding:15,
        borderRadius:15,
        margin:5,
        marginHorizontal:10,
     },
     innerContainer:{
        alignItems:'center',
        flexDirection:'column',
     },
     itemHeading:{
        fontWeight:'bold'
     },
     itemText:{
        fontWeight:'300'
     }

})

排查与解决步骤 #

• 修正组件导入方式：
  Fetch组件使用export default Fetch默认导出，因此在App组件中必须用默认导入：

  // 正确写法
  import Fetch from './path/to/Fetch'; // 替换为实际文件路径
  

  若错误使用命名导入import { Fetch } from './path/to/Fetch'，会得到undefined或无效对象，触发组件类型错误。

• 修复useEffect的async用法：
  useEffect的回调函数不能直接标记为async（会返回Promise，而useEffect期望返回清理函数或undefined），即使onSnapshot不需要async，也应修正写法，同时添加监听清理函数避免内存泄漏：

  useEffect(() => {
    // 取消监听的清理函数
    const unsubscribe = todoRef.onSnapshot(querySnapshot => {
      const users = []
      querySnapshot.forEach((doc) => {
        const { heading, text } = doc.data()
        users.push({
          id: doc.id,
          heading,
          text,
        })
      })
      setUsers(users)
    })
    return unsubscribe;
  }, [])
  

• 修正样式中的颜色值：
  样式中backgroundColor:'e5e5e5'缺少#前缀，应改为backgroundColor:'#e5e5e5'，否则样式不会生效。

• 验证Firebase导出：
  确认../config文件中firebase的导出正确，例如：

  // config.js示例
  import { initializeApp } from "firebase/app";
  import { getFirestore } from "firebase/firestore";
  
  const firebaseConfig = {
    // 你的Firebase配置
  };
  
  const app = initializeApp(firebaseConfig);
  export const firebase = { firestore: getFirestore(app) };
  

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