当' projectId '来自环境变量时，Firebase配置中断

Question

我遇到了一个真的奇怪的问题与我的Firebase配置对象和Vercel环境变量。

我可以用Vercel环境变量建立我的整个Firebase配置对象，但如果我为projectId的值使用环境变量，它会破坏整个配置。

我的配置遵循以下格式:

const firebaseConfig = {
apiKey: `${process.env.FIREBASE_apiKEY}`,
authDomain: `${process.env.FIREBASE_authDomain}`,
projectId: "my-project-id-here",
storageBucket: `${process.env.FIREBASE_storageBucket}`,
messagingSenderId: `${process.env.FIREBASE_messagingSenderId}`,
appId: `${process.env.FIREBASE_appId}`,
measurementId: `${process.env.FIREBASE_measurementId}`
};

然后用对象初始化Firebase，如下所示:

const app = initializeApp(firebaseConfig)

上面的工作，但如果我改变projecId的值为

`${process.env.FIREBASE_projectId}`

匹配其他的，我得到FirebaseError: Failed to get document because the client is offline.

我已经验证了process.env.FIREBASE_projectId的值在.env文件中是正确的，并且该值在firebaseConfig中是正确的，但唯一一次我没有得到错误是当我硬编码字符串中的值时。

Answer 1

如果您正在使用nextjs，使用NEXT_PUBLIC前缀为您的环境变量

const firebaseConfig = {
apiKey: `${process.env.NEXT_PUBLIC_FIREBASE_APIKEY}`,
authDomain: `${process.env.NEXT_PUBLIC_FIREBASE_AUTHDOMAIN}`,
projectId: `${process.env.NEXT_PUBLIC_FIREBASE_PROJECTID}`,
storageBucket: `${process.env.NEXT_PUBLIC_FIREBASE_STORAGEBUCKET}`,    
messagingSenderId:`${process.env.NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID}`,
appId: `${process.env.NEXT_PUBLIC_FIREBASE_APPID}`,
measurementId: `${process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENTID}`
};