Next.JS 13 Firebase Storage: No default bucket found

Using Next.JS 13 and Firebase V9.

I have been able to make requests to Cloud Firestore successfully without issue. I believe my firebase app is configured correctly. I cannot identify the issue with my Cloud Storage setup though. Every time I try to get a ref and download a Cloud Storage file, I am met with No default bucket found. I made sure to initialize the storage bucket with files in the Firebase Console before I attempted this. I have tried numerous variations of implementation from Bard, Stackoverflow, and elsewhere, and I am certain it’s probably just a minor thing I’ve overlooked, but I can’t seem to narrow down the issue for the life of me.

Here is my Firebase.js file in my main project directory.

// Import the functions you need from the SDKs you need
import { initializeApp, getApp, getApps} from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage} from "firebase/storage";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.FIREBASE_APIKEY,
  authDomain: process.env.FIREBASE_AUTHDOMAIN,
  projectId: process.env.FIREBASE_PROJECTID,
  storageBucket: process.env.FIREBASE_STORAGEBUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGEID,
  appId: process.env.FIREBASE_APPID,
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  measurementId: process.env.FIREBASE_MEASUREMENTID
};

// Initialize Firebase
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
const db = getFirestore(app);
const storage = getStorage(app);

//Export relevant modules
export { app, db, storage };

and here is the FileService file I’ve been trying to call when clicking a button on the website, which results in the no storage bucket found error.

import { storage } from "@/firebase"
import { ref, getDownloadURL } from "firebase/storage";

const downloadFile = async (fileName: string) => {
    const storageRef = await ref(storage);
    const file = await ref(storageRef, fileName);

    // Download the file to the specified location.
    await fetch(await getDownloadURL(file), {
        method: "GET",
        mode: "cors",
        headers: {
        "Content-Type": "application/pdf",
        },
    });
};

export default downloadFile;

I’ve also attempted to get a storageRef inside the Firebase.js file just to see if that would work but it throws the error there as well. I appreciate any guidance, I spent a long time trying to figure this one out and I wouldn’t be surprised if I’m doing overlooking something small and stupid but I need a third party to point me in the right direction here.