如何在MUI Dialog中集成FirebaseUI认证？解决关闭未渲染问题

问题根源 #

你当前的实现存在两个核心问题：

1. 在index.js中直接调用ui.start()时，Dialog尚未渲染，#firebaseui-auth-container元素还不存在，导致FirebaseUI无法挂载。
2. MUI Dialog在open={false}时会卸载内部内容，容器元素被移除，FirebaseUI会因找不到挂载目标而报错。

推荐解决方案：控制FirebaseUI的初始化与销毁时机 #

这种方式遵循React生命周期，仅在Dialog打开时初始化FirebaseUI，关闭时清理资源，避免不必要的渲染和内存泄漏。

步骤1：调整Firebase初始化代码

修改index.js，移除直接调用ui.start()的代码，导出Firebase相关实例供App组件使用：

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.scss';
import 'firebaseui/dist/firebaseui.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createTheme, ThemeProvider } from '@mui/material';
import { StyledEngineProvider } from '@mui/material/styles';

import { auth as firebaseUIAuth } from 'firebaseui';
import { initializeApp } from 'firebase/app';
import { getAuth, EmailAuthProvider, GoogleAuthProvider } from 'firebase/auth';
import { getAnalytics } from 'firebase/analytics';

const firebaseConfig = {
  // 你的Firebase配置
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

export const auth = getAuth();
export const ui = new firebaseUIAuth.AuthUI(auth);
export const uiConfig = {
  // 你的FirebaseUI配置
};

const theme = createTheme({ /* 你的主题配置 */ })

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
        <App />
      </ThemeProvider>
    </StyledEngineProvider>
  </React.StrictMode>
);

reportWebVitals();

步骤2：在App组件中监听Dialog状态，动态初始化FirebaseUI

修改App.js，使用useEffect监听Dialog的打开状态，在合适时机启动或重置FirebaseUI：

// App.js
import React from 'react';
import Dialog from '@mui/material/Dialog';
import IconButton from '@mui/material/IconButton';
import PersonIcon from '@mui/icons-material/Person';
import { ui, uiConfig } from './index';

function App() {
  const [dialogOpen, toggleDialog] = React.useState(false);

  React.useEffect(() => {
    if (dialogOpen) {
      // 等待Dialog渲染完成，获取容器元素
      const authContainer = document.getElementById('firebaseui-auth-container');
      if (authContainer) {
        // 启动FirebaseUI
        ui.start(authContainer, uiConfig);
      }
    } else {
      // 关闭Dialog时重置FirebaseUI，清理资源
      if (ui.isPendingRedirect()) {
        ui.cancelPendingRedirect();
      }
      ui.reset();
    }
  }, [dialogOpen]);

  return (
    <div className="App" id="App">
      <div className='App-home'>
        <IconButton
          aria-label="profile"
          className='App-button_profile'
          onClick={() => toggleDialog(true)}
        >
          <PersonIcon className="big-icon" />
        </IconButton>
        <Dialog open={dialogOpen} onClose={() => toggleDialog(false)}>
          <div id="firebaseui-auth-container"></div>
        </Dialog>
      </div>
    </div>
  );
}

export default App;

可选方案：让Dialog保持渲染但隐藏 #

如果你坚持让Dialog保持渲染状态，可以通过CSS控制隐藏，而非依赖open prop卸载内容。但这种方法可能导致不必要的资源占用，仅在特殊场景下使用：

1. 修改Dialog的open prop始终为true，通过自定义className控制可见性：

// App.js
<Dialog 
  open={true} 
  onClose={() => toggleDialog(false)}
  className={!dialogOpen ? 'hidden-dialog' : ''}
>
  <div id="firebaseui-auth-container"></div>
</Dialog>

2. 在全局样式（如index.scss）中添加隐藏样式：

.hidden-dialog {
  visibility: hidden;
  pointer-events: none; /* 阻止隐藏状态下的交互 */
}

关键注意事项 #

• 每次Dialog打开时重新启动FirebaseUI，避免因容器元素卸载导致的挂载错误。
• 关闭Dialog时调用ui.reset()清理FirebaseUI实例，防止内存泄漏和状态混乱。
• 处理重定向场景：如果存在未完成的认证重定向，调用ui.cancelPendingRedirect()取消，避免后续异常。

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