Next.js集成Firestore遇ECONNREFUSED错误，求解决方案

我是Firebase新手，在Next.js应用中尝试用Firestore获取数据时遇到连接错误，错误信息如下：

TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11730:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
cause: AggregateError
at internalConnectMultiple (node:net:1114:18)
at afterConnectMultiple (node:net:1667:5)
at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
code: 'ECONNREFUSED',
[errors]: [ [Error], [Error] ]
}
}

相关代码：

import React from 'react';
import { initializeApp } from 'firebase/app'
import {
  getFirestore, collection, getDocs
} from 'firebase/firestore'

const firebaseConfig = {
    apiKey: process.env.API_KEY,
    authDomain: "social-app-a0aef.firebaseapp.com",
    projectId: "social-app-a0aef",
    storageBucket: "social-app-a0aef.appspot.com",
    messagingSenderId: "106093296170",
    appId: "1:106093296170:web:852948bb8d8fd86ccfe153"
  };

// init firebase
const app = initializeApp(firebaseConfig)

// init services
const db = getFirestore(app)

// collection ref
const colRef = collection(db, "books")

async function Firebase() {
    try {
        const snapshot = await getDocs(colRef)
        snapshot.forEach((doc) => {
            console.log(doc.data)
        })
    } catch (err) {
        console.error("firebase error:", err)
    }

    return (
        <div></div>
    )
}

export default Firebase

已检查.env.local文件、数据库状态，尝试捕获错误但仍未解决。

可能的原因及解决方法 #

1. Next.js环境变量配置问题 #

• 确保.env.local中的变量名以NEXT_PUBLIC_开头，Next.js仅会将前缀为NEXT_PUBLIC_的环境变量暴露给客户端代码。将API_KEY改为NEXT_PUBLIC_API_KEY，同时更新代码中的引用：

apiKey: process.env.NEXT_PUBLIC_API_KEY,

• 修改后必须重启Next.js开发服务器，环境变量才会生效。

2. Firebase初始化时机问题 #

在Next.js客户端组件中直接初始化Firebase可能导致重复初始化或连接异常，建议将初始化逻辑抽离到单独文件并添加重复初始化判断：

// lib/firebase.js
import { initializeApp, getApps } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_API_KEY,
    authDomain: "social-app-a0aef.firebaseapp.com",
    projectId: "social-app-a0aef",
    storageBucket: "social-app-a0aef.appspot.com",
    messagingSenderId: "106093296170",
    appId: "1:106093296170:web:852948bb8d8fd86ccfe153"
};

let app;
let db;

if (!getApps().length) {
    app = initializeApp(firebaseConfig);
    db = getFirestore(app);
} else {
    app = getApps()[0];
    db = getFirestore(app);
}

export { db };

在组件中导入使用：

import { collection, getDocs } from 'firebase/firestore';
import { db } from '../lib/firebase';

async function Firebase() {
    try {
        const colRef = collection(db, "books");
        const snapshot = await getDocs(colRef);
        snapshot.forEach((doc) => {
            console.log(doc.data()); // 修正：调用data()方法，而非访问data属性
        });
    } catch (err) {
        console.error("firebase error:", err);
    }

    return <div></div>;
}

export default Firebase;

3. 网络或防火墙限制 #

• ECONNREFUSED表示无法连接到Firestore服务，检查本地网络是否能访问firestore.googleapis.com。
• 临时关闭本地防火墙、VPN或代理工具，尝试重新连接。

4. Firestore数据库权限设置 #

确保Firestore安全规则允许读取操作，开发阶段可临时设置宽松规则（上线前务必修改为严格权限）：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

5. 代码细节修正 #

代码中doc.data是函数属性，正确获取文档数据需要调用doc.data()方法，虽然这不是连接错误的直接原因，但属于需要修正的代码问题。

内容的提问来源于stack exchange，提问作者Rumert Kıran