Firebase集合上传图片时生成重复文档的问题求助

核心原因 #

1. React严格模式重复执行：开发环境下React Strict Mode会主动重复调用useEffect回调（含副作用与清理逻辑），用于检测潜在问题。这会导致storageRef.put().on()被调用两次，两个监听的完成回调都会执行，进而生成两个重复文档。
2. 未清理上传监听：当前代码未在useEffect的清理阶段取消Firebase存储的上传状态监听。若组件重新渲染（比如file依赖变化），旧的监听仍会保留，上传完成时新旧回调都会触发，造成重复添加文档。
3. 文件引用不稳定：若父组件中file对象的引用在渲染时频繁变化（比如每次渲染生成新的file实例），会重复触发useEffect执行，发起多次上传请求。

解决步骤 #

1. 添加上传监听清理逻辑 #

在useEffect中加入清理函数，取消Firebase的上传状态监听，避免旧回调重复执行：

import { useState, useEffect } from 'react';
import { projectStorage, projectFirestore, timestamp } from '../firebase-config';

const useStorage = (file) => {
  const [progress, setProgress] = useState(0);
  const [error, setError] = useState(null);
  const [url, setUrl] = useState(null);

  useEffect(() => {
    if (!file) return;
    
    const storageRef = projectStorage.ref(file.name);
    const collectionRef = projectFirestore.collection('images');
    
    // 获取取消监听的函数
    const unsubscribe = storageRef.put(file).on('state_changed', 
      (snap) => {
        const percentage = (snap.bytesTransferred / snap.totalBytes) * 100;
        setProgress(percentage);
      }, 
      (err) => {
        setError(err);
      }, 
      async () => {
        const url = await storageRef.getDownloadURL();
        const createdAt = timestamp();
        await collectionRef.add({ url, createdAt });
        setUrl(url);
      }
    );

    // 组件卸载/重新渲染时取消监听
    return () => unsubscribe();
  }, [file]);

  return { progress, url, error };
}

export default useStorage;

2. 保证文件引用稳定 #

在父组件中确保传递给useStorage的file引用稳定，避免不必要的重新渲染：

// 父组件示例
const ParentComponent = () => {
  const [file, setFile] = useState(null);

  const handleFileChange = (e) => {
    const selectedFile = e.target.files[0];
    if (selectedFile) {
      setFile(selectedFile);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      {file && <UploadComponent file={file} />}
    </div>
  );
};

3. 处理开发环境严格模式问题 #

Strict Mode仅在开发环境生效，生产环境不会出现重复文档。若需在开发环境彻底避免，可暂时移除ReactDOM.render中的<StrictMode>包裹，但不建议长期这么做——Strict Mode能帮助排查其他潜在副作用问题。

额外优化：绝对保证文档唯一性 #

若需确保每张图片只生成一个文档，可通过文件唯一标识作为文档ID，避免重复创建：

// 示例：用文件名称+大小+修改时间生成唯一ID
const generateFileId = (file) => {
  return `${file.name}-${file.size}-${file.lastModified}`;
};

// 在上传完成回调中替换add为doc.set：
const fileId = generateFileId(file);
await collectionRef.doc(fileId).set({ url, createdAt }, { merge: false });

这样即使重复触发上传，也只会覆盖同一文档，不会生成重复项。

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