React Native Web生产环境Firebase IndexedDB事务不活跃问题求助

1. 修正Webpack环境变量配置 #

你的Webpack配置里DefinePlugin的__DEV__设置存在逻辑错误，当前写法会导致生产环境下__DEV__仍然为true。Firebase依赖这个变量判断运行环境，进而启用了不兼容生产代码压缩的IndexedDB逻辑，这是核心诱因。

修改DefinePlugin代码：

new webpack.DefinePlugin({
  __DEV__: JSON.stringify(argv.mode === 'development'),
  'process.env.NODE_ENV': JSON.stringify(argv.mode),
  process: { env: {} },
}),

2. 延迟Firebase初始化时机 #

生产环境下代码压缩后，Firebase可能在DOM/IndexedDB环境未完全就绪时提前初始化，导致事务异常。将初始化逻辑延迟到应用挂载后执行：

// 替换原有的直接初始化代码
let firebaseApp;

export const initFirebase = () => {
  if (!firebaseApp) {
    const firebaseConfig = { /* 你的配置内容 */ };
    firebaseApp = initializeApp(firebaseConfig);
    firebaseApp.automaticDataCollectionEnabled = true;
  }
};

// 在React入口组件中调用初始化
import { useEffect } from 'react';
import { initFirebase } from './firebase';

function App() {
  useEffect(() => {
    initFirebase();
  }, []);
  
  // ... 组件其余内容
}

3. 调整idb库的编译规则 #

你的Babel Loader排除了@firebase/app/node_modules/idb，但生产环境下这个库的代码需要被正确编译才能适配IndexedDB事务逻辑。移除该排除项：

修改babelLoaderConfiguration的exclude数组：

exclude: [
  path.resolve(appDirectory, '../node_modules/@babel/runtime/helpers'),
  path.resolve(appDirectory, '../node_modules/babel-runtime'),
  path.resolve(appDirectory, '../node_modules/glob'),
  path.resolve(appDirectory, '../node_modules/immer'),
],

4. 临时禁用Firebase持久化（应急方案） #

如果以上方案都不生效，可以临时禁用Firestore本地持久化绕过错误（仅作应急，不推荐长期使用）：

import { getFirestore } from 'firebase/firestore';

// Firebase初始化后添加此配置
const db = getFirestore(firebaseApp);
db.settings({ persistence: false });

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