在Next.js应用程序中获取firebase存储文件URL返回XMLHttpRequest ReferenceErro

Question

我已经设置了Next.js(11)应用程序与firebase版本8.7的工作连接。我有一个问题，获取下载URL的图像:

如果我创建一个函数(下面的例子)来获取上传的图像-假设它在那里&我知道它的名字和位置。它将只工作一次(dev env)

在任何路由更改或页面刷新后(如果我没有更改路由或刷新页面，则不会更改代码)，应用程序会崩溃并出现终端错误:

ReferenceError: XMLHttpRequest is not defined

当我在客户端调用getStaticProps或组件本身时，我得到这个错误

函数的例子:

import firebase from "firebase/app";
import "firebase/storage";
export const getImgUrl = async () => {
const storage = firebase.storage();
const pathReference = storage.ref("user_uploads/my_image.jpg");
pathReference
.getDownloadURL()
.then((url) => {
console.log("my url", url);
})
.catch((error) => {
console.error("error", error);
}); 
};

Answer 1

我有一个旁路解决方案:

升级到firebase sdk version 9(模块化).

Create db &存储:

const initFirebase = () => {
const db = getFirestore(firebaseApp)
const storage = getStorage(firebaseApp)
console.log('Firebase was successfully initialized')
return [db, storage]
}
// Init firebase:
export const [db, storage] = initFirebase()

使用它:

const getData = async () => {
console.log('getData runs')
try {
const url = await getDownloadURL(ref(storage, 'landing/land.jpg'))
console.log('getData url:', url)
return url
} catch (error) {
// Handle any errors
}
}

和调用getData在getServerSideProps或getStaticProps在任何组件