Firebase Storage上传文件自定义Metadata未显示问题

问题现象 #

上传图片到Firebase Storage时已配置自定义元数据，预期在控制台「Other Metadata」板块看到对应字段，但实际未展示：

本地控制台打印构造的metadata对象，字段值均正常：

当前使用的上传代码：

import { firebaseApp } from "./firebase";
import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";
import { React} from "react";

const storage = getStorage(firebaseApp);

/**** PROPERTY LISTINGS ****/
// Upload 1 file to Firebase Storage
export async function uploadFile(file, houseId, houseName) {
    // Create the file metadata
    /** @type {any} */
    const metadata = {
        contentType: file.type,
        cacheControl: 'public,max-age=300',
        customMetadata: {
            houseId: houseId,
            houseName: houseName,
        },
    };

    console.log("metadata: ", metadata);

    // 原错误传参位置
    const storageRef = ref(storage, 'property_images/' + houseId + '/' + file.name, metadata);
    const uploadTask = uploadBytesResumable(storageRef, file);

    uploadTask.on('state_changed',
        (snapshot) => {
            const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            console.log('Upload is ' + progress + '% done');
            switch (snapshot.state) {
                case 'paused':
                    console.log('Upload is paused');
                    break;
                case 'running':
                    console.log('Upload is running');
                    break;
            }
        },
        (error) => {
            switch (error.code) {
                case 'storage/unauthorized':
                    break;
                case 'storage/canceled':
                    break;
                case 'storage/unknown':
                    break;
            }
        },
        () => {
            getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
                console.log('File available at', downloadURL);
            });
        }
    );
}

当前配置的Storage安全规则（配置本身无问题，不需要调整）：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

问题原因 #

参数传错位置导致元数据未随上传请求提交：

• ref()方法仅接收storage实例、存储路径两个有效参数，传入的第三个metadata参数会被直接忽略，不会生效
• uploadBytesResumable方法才是接收上传配置（含元数据）的入口，原调用中该方法只传了存储引用和文件对象，没有传入构造好的元数据，所以上传请求根本没有携带自定义元数据到服务端，控制台自然不会展示对应字段。

修复方案 #

调整参数传递位置即可：

1. 删除ref()调用中多余的第三个metadata参数
2. 将metadata作为第三个参数传入uploadBytesResumable方法

修改后的核心代码片段：

// 移除ref的第三个metadata参数
const storageRef = ref(storage, 'property_images/' + houseId + '/' + file.name);
// 上传时传入metadata配置
const uploadTask = uploadBytesResumable(storageRef, file, metadata);

修改后重新上传文件，上传完成后刷新Firebase控制台，即可在「Other Metadata」板块看到配置的自定义元数据字段。

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