Reactjs 如何在应用程序的顶层设置firebase db listener，为导航子组件提供道具

我希望整个应用程序只有一个侦听器，所以我想我可以在应用程序的顶层设置一个侦听器，然后将数据传递给子道具。但我做错了，有人能帮我吗？目前，我在两个不同的地方有监听器调用相同的数据，这就是为什么我想集中它。我查看了React上下文，但我不需要编辑数据，只需要读取它

代码如下：

    export default function App() {
  // Set an initializing state whilst Firebase connects
  const [initializing, setInitializing] = useState(true);
  const [user, setUser] = useState();
  const [userData, setUserData] = useState();
  // Handle user state changes
  function onAuthStateChanged(user) {
    setUser(user);
    if (initializing) setInitializing(false);
  }

  useEffect(() => {
    const subscriber = Firebase.auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber; // unsubscribe on unmount
  }, []);

  if (initializing) return null;

  if (!user) {
    return (
      <SignUp/>
    );
  }
  else{
    
    Firebase.database().ref(
      '/Users/' + Firebase.auth().currentUser.uid + '/userData'
      ).orderByKey().on('value',snapshot => {
        setUserData(snapshot.val())
        
      })
    
    return (
      <ErrorBoundary>
      <SafeAreaProvider>
      <NavigationContainer>
        <Tab.Navigator
            tabBarOptions={{
              activeTintColor:'orange',
              inactiveTintColor:'black',
              labelStyle:{ fontSize: 20 }
              
            }}>
          <Tab.Screen name="New" component={FormIn} />
          
          <Tab.Screen name="Logs" children={() => <Logs data={userData}/>} />
          
          
        </Tab.Navigator>
      </NavigationContainer>
      </SafeAreaProvider>
      </ErrorBoundary>
    );
  }
}

导出默认函数App（）{
//在Firebase连接时设置初始化状态
const[initializing，setInitializing]=useState（true）；
const[user，setUser]=useState（）；
const[userData，setUserData]=useState（）；
//处理用户状态更改
函数onAuthStateChanged（用户）{
setUser（用户）；
if（初始化）setInitializing（false）；
}
useffect（（）=>{
const subscriber=Firebase.auth（）.onAuthStateChanged（onAuthStateChanged）；
返回订阅服务器；//卸载时取消订阅
}, []);
如果（初始化）返回null；
如果（！用户）{
返回(
);
}
否则{
Firebase.database（）.ref(
'/Users/'+Firebase.auth（）.currentUser.uid+'/userData'
).orderByKey（）.on（'value'，快照=>{
setUserData（snapshot.val（））
})
返回(
} />
);
}
}

我得到了太多的错误重新渲染，但我不知道为什么