Javascript 错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）

请有人帮助我，我正在尝试修复index.js文件中出现的错误：

import { Image, StyleSheet, Text, View, ScrollView } from "react-native";
import { Button, Gap, Number, TransactionCard } from "../../components";
import firebase from "../../config/Firebase";

const Home = ({ navigation, route }) => {
  const [profile, setProfile] = useState({});
  const [balance, setBalance] = useState({
    cashOnHand: 0,
    cashOnBank: 0,
    totalBalance: 0,
  });

  const { uid } = route.params;

  const getUserProfile = () => {
    firebase
      .database()
      .ref(`users/${uid}/`)
      .once("value", (res) => {
        const photo = `data:image/jpeg;base64, ${res.val().photo}`;
        setProfile({ ...res.val(), photo: photo });
      });
  };

  const getUserBalance = () => {
    firebase
      .database()
      .ref(`balance/${uid}`)
      .on("value", (res) => {
        if (res.val()) {
          setBalance(res.val());
        }
      });
  };

  useEffect(() => {
    getUserProfile();
    getUserBalance();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <View style={styles.page}>
      <View style={styles.profileWrapper}>
        <View>
          <Text style={styles.title}>Money Tracker</Text>
          <Text style={styles.subTitle}>Track your money</Text>
        </View>
        <Image source={{ uri: profile.photo }} style={styles.image} />
      </View>
      <Gap height={24} />
      <View style={styles.balanceWrapper}>
        <Text style={styles.cardTitle}>Your Balance</Text>
        <Number number={balance.totalBalance} style={styles.balance} />
        <Text style={styles.cashOnHand}>
          Cash On Hand{" "}
          <Number number={balance.cashOnHand} style={styles.amount} />
        </Text>
        <Text style={styles.cashOnBank}>
          Cash On Bank{" "}
          <Number number={balance.cashOnBank} style={styles.amount} />
        </Text>
      </View>
      <Gap height={24} />
      <View style={styles.addTransactionWrapper}>
        <Text style={styles.cardTitle}>Add Transaction</Text>
        <Button
          title="Cash On Hand"
          onPress={() =>
            navigation.navigate("AddTransaction", {
              title: "Cash On Hand",
              uid: uid,
            })
          }
        />
        <Gap height={16} />
        <Button
          title="Cash On Bank"
          onPress={() =>
            navigation.navigate("AddTransaction", {
              title: "Cash On Bank",
              uid: uid,
            })
          }
        />
      </View>
      <Gap height={24} />
    </View>
  );
};

export default Home;

从“react native”导入{Image，StyleSheet，Text，View，ScrollView}；
从“../../components”导入{按钮、间隙、编号、交易卡}”；
从“../../config/firebase”导入firebase；
常量Home=（{导航，路由}）=>{
const[profile，setProfile]=useState（{}）；
const[balance，setBalance]=使用状态({
现有现金：0，
现金银行：0，
总余额：0，
});
const{uid}=route.params；
const getUserProfile=（）=>{
火基
.数据库（）
.ref（`users/${uid}/`）
.一次（“值”，（res）=>{
const photo=`data:image/jpeg；base64，${res.val（）.photo}`；
setProfile（{…res.val（），photo:photo}）；
});
};
const getUserBalance=（）=>{
火基
.数据库（）
.ref（`balance/${uid}`）
.on（“值”，（res）=>{
if（res.val（））{
立位平衡（res.val（））；
}
});
};
useffect（（）=>{
getUserProfile（）；
getUserBalance（）；
//eslint禁用下一行react HOOK/deps
}, []);
返回(
金钱追踪器
追踪你的钱
你的余额
库存现金{“}
银行存款{“}
添加事务
导航。导航（“AddTransaction”{
标题：“库存现金”，
uid:uid，
})
}
/>
导航。导航（“AddTransaction”{
标题：“银行存款”，
uid:uid，
})
}
/>
);
};
导出默认主页；

这可能是由于程序中的某些JS模块导出/导入问题造成的，通常是由于以下两个原因之一：

• 您忘记导出，或者导出错误
• 你导入了一些不存在的东西，或者导入了一些 错误地

---

但是我不知道这个错误。提前感谢。

检查您的自定义组件按钮、间隙等，此处没有任何错误