Javascript getStaticProps中的Next.js firebase在开发模式下导致问题

我正在getStaticProps中从firebase获取一些图像URL。当用户点击该站点时，图像将显示在页面上。您可以单击图像并转到另一个页面以单独查看图像。它在prod中运行良好，您可以单击图像并返回主页，不会出现任何问题。在开发模式下，在新构建之后，第一个页面可以正常加载，但是如果我点击其中一个图像，下一个页面就会出现问题：

TypeError:\u config\u firebase\u WEBPACK\u IMPORTED\u MODULE\u 3\u默认值。数据库不是函数

我认为这与本地主机上的服务器呈现和开发模式有关。它获取第一个页面，但在下一个页面上，firebase并没有定义或其他什么。下面是一些代码：

getStaticProps

// fetch urls from data base
const db = firebase.database();
const ref = db.ref('images');
const getImages = await ref.once('value');
const images = getImages.val();

pages/image/index.js

getStaticProps

和

getstaticpath

执行与上述相同的代码。如果我在这个页面上启动dev模式，会加载单个图像，但当我导航到主页时，会从上面得到错误。同样，若我从主页开始，但导航到单图像页面，它在主页上工作，但导航到单图像页面会抛出上面的错误

正如我前面所说，它在生产环境中工作得很好，但由于某些原因，在开发模式下它不能工作。但是在开发模式下，杀死服务器并再次运行

warndev

来测试页面是非常烦人的。有没有办法让它不会在next.js的dev模式下导致错误