React-Express部署后onAuthStateChange生产环境失效问题

问题代码（React useEffect片段） #

useEffect(() => {     
    console.log('outside auth state changed unsubscribe');
    const unsubscribe = () => {
        console.log('inside auth state changed unsubscribe');
        onAuthStateChanged(auth, (loggedUser: User | null) => {
            setUser(loggedUser)
            console.log('on auth state changed func user:', loggedUser);
            setLoading(false)
        })
    }
    console.log('user ::: after onAuthStateChanged', user);
    return () => {
        unsubscribe()
    }
}, [])

问题现象 #

Firebase和Socket相关功能在以下场景均正常工作：

• 开发环境
• 构建dist文件夹后通过Express本地运行的生产模式

但在Express服务器中刷新页面时，上述unsubscribe函数无法执行，setLoading(false)从未触发。生产模式下完全看不到这条日志输出：

console.log('inside auth state changed unsubscribe');

配套的Express服务器代码 #

const __dirname2 = path.resolve()

if (true) {
    // console.log( path.join(__dirname2, "/client/dist"));
    app.use(express.static(path.join(__dirname2, "/client/dist")))
    app.get('*', (req, res) => {
        res.sendFile(path.join(__dirname2, "client", "dist", "index.html"))
    })
} else {
    app.get('/', (req, res) => {
        console.log(process.env.NODE_ENV);
        res.send("API is running successfully")
    })
}

问题根源与修复方案 #

核心错误 #

你的代码完全搞反了onAuthStateChanged的使用逻辑：

• onAuthStateChanged的返回值才是用于取消订阅的函数
• 你现在的写法是把注册监听的逻辑放到了unsubscribe函数里，相当于组件卸载时才去绑定监听，完全不符合需求

正确写法 #

useEffect(() => {     
    console.log('auth state listener registered');
    // 调用onAuthStateChange，直接获取取消订阅函数
    const unsubscribe = onAuthStateChanged(auth, (loggedUser: User | null) => {
        setUser(loggedUser)
        console.log('on auth state changed func user:', loggedUser);
        setLoading(false)
    })

    console.log('user ::: after onAuthStateChanged', user);
    // 返回取消订阅函数，组件卸载时自动执行
    return unsubscribe
}, [])

为什么开发环境没暴露问题？ #

开发环境的React热重载机制会保留组件状态，组件卸载逻辑和生产环境存在差异，因此这个逻辑错误被掩盖了。而生产环境刷新页面时，组件会完全卸载再重新挂载，错误的逻辑就直接暴露出来。

关于Express配置的说明 #

你的Express托管配置没有问题，它正确处理了SPA路由和静态文件，问题完全出在React的useEffect逻辑上。

内容的提问来源于stack exchange，提问作者S I A M