如何在 NextJs13 中从 Firebase 存储下载文件

Question

我正在构建一个使用 NextJs 和 Firebase 分发电子书的网站。我想当用户点击下载按钮时从云firestore下载pdf文件

我尝试像这样下载文件

const fetchFile = async () => {
  const response = await fetch(getDownloadURL(fileRef));
  console.log(response)
  const blob = await response.blob();
  return blob;
};
const download = async () => {
  const blob = await fetchFile();
  FileSaver.saveAs(blob, 'file.pdf');
};

文件已下载到我的计算机中，但当我尝试打开它时，出现错误，提示无法加载文档。 在我单击错误按钮后，我在控制台上收到一条错误消息：

page.js:22 GET http://localhost:3000/[object%20Promise] 404（未找到）

将响应记录到控制台后，我发现它返回 http://localhost:3000/[object%20Promise] 而不是文件的 URL

Answer 1

getDownloadURL

是一个异步方法，返回一个

Promise

。 您也需要

await

拨打该电话。

所以：

const fetchFile = async () => {
  const downloadURL = await getDownloadURL(fileRef);
  const response = await fetch(downloadURL);
  console.log(response)
  const blob = await response.blob();
  return blob;
};