Nuxt3（というかVue3）とCloud Storage for Firebaseを使ううえで気を付ける些細な事

問題

ご存じの通り、Vue3では変数をリアクティブにする際、「ref」を使用します。

あれ？

「Cloud Storage for Firebase」でも見ますね、「ref」

例えばアップロード

// ...
const storageRef: StorageReference = ref(getStorage(), fileName);
uploadString(storageRef, dataUrl, 'data_url').then((snapshot) => {
    resolve(true);
}).catch(error => {
    reject(false);
});
// ...

「ref(getStorage(), fileName);」

削除も

// ...
deleteObject(ref(getStorage(), path)).then(() => {
    resolve(true);
}).catch((error) => {
    reject(false);
});
// ...

「deleteObject(ref(getStorage(), path))」

当然この「ref」はVueのrefと競合します。
特にNuxtでは暗黙的にインポートされるため、意識してないとバグの基になります。

解決

大したことはないです、しっかりインポートして、名前を適当に変更してあげましょう。

import {getStorage, uploadString, ref as firebaeRef} from "@firebase/storage";

// ...
const storageRef: StorageReference = firebaeRef(getStorage(), fileName);
uploadString(storageRef, dataUrl, 'data_url').then((snapshot) => {
    resolve(true);
}).catch(error => {
    reject(false);
});
// ...