Tengo el siguiente componente Reaccionar con Typecript que se supone que cambia de un lado a otro en función de un usuario que se ha autenticado a través de la autenticación de Firebase:

const Navigation = (authUser: any) ={amp}gt; ( {amp}lt;div{amp}gt; {console.log(authUser)} {authUser ? {amp}lt;NavigationAuth /{amp}gt; : {amp}lt;NavigationNonAuth /{amp}gt; } {amp}lt;h1{amp}gt;Navigation{amp}lt;/h1{amp}gt; {amp}lt;/div{amp}gt; ); 

El componente que se encuentra arriba es App, y se canaliza en la propiedad authUser de esta manera:

 ... interface Props { firebase?: Firebase, listener?: any } interface State { authUser: any, } class App extends React.Component{amp}lt;Props, State{amp}gt; { listener: any; constructor(props: any) { super(props) this.state = { authUser: null } } componentDidMount() { this.listener = this.props.firebase?.auth.onAuthStateChanged(authUser ={amp}gt; { authUser ? this.setState({ authUser }) : this.setState({ authUser: null }); }); } componentWillUnmount() { this.listener(); } render() { return( {amp}lt;Router{amp}gt; {amp}lt;div{amp}gt; {amp}lt;Navigation authUser={this.state.authUser}/{amp}gt; {amp}lt;hr /{amp}gt; ... 

Al usar las herramientas de desarrollador React, puedo ver que authUser de las herramientas que authUser se está volviendo nulo porque no he disparado ninguna acción de inicio de sesión, y sin embargo, aunque el valor es definitivamente nulo, ¿sigue siendo {authUser ? {amp}lt;NavigationAuth /{amp}gt; : {amp}lt;NavigationNonAuth /{amp}gt; } {authUser ? {amp}lt;NavigationAuth /{amp}gt; : {amp}lt;NavigationNonAuth /{amp}gt; } como verdadero y representando {amp}lt;NavigationAuth /{amp}gt; lugar de `’

¿Hay algo en mi lógica que me falta aquí? ¿O de alguna manera funky funciona el operador ternario que desconozco con valores nulos? Esperaría que si se trata de un valor nulo, el resultado false arrojaría, a menos que la forma en que lo he codificado en este momento esté de alguna manera buscando algún valor que no sea algún tipo de indefinido. ¿Qué nulo contaría? ¿Porque no está indefinido?

Más extraño aún, si lo defino explícitamente, entonces el operador ternario es así: {authUser != null ? {amp}lt;NavigationAuth /{amp}gt; : {amp}lt;NavigationNonAuth /{amp}gt; } {authUser != null ? {amp}lt;NavigationAuth /{amp}gt; : {amp}lt;NavigationNonAuth /{amp}gt; }

SIGUE representando {amp}lt;NavigationAuth /{amp}gt; aunque el valor sea nulo. ¿Qué estoy haciendo mal?

No estoy familiarizado con TypeScript, pero ¿no debería ser props.authUser? En vanilla JS, escribiría esto:

 const Navigation = ({authUser}) ={amp}gt; ( {amp}lt;div{amp}gt; {console.log(authUser)} {authUser ? {amp}lt;NavigationAuth /{amp}gt; : {amp}lt;NavigationNonAuth /{amp}gt; } {amp}lt;h1{amp}gt;Navigation{amp}lt;/h1{amp}gt; {amp}lt;/div{amp}gt; );