如何将Firebase Storage中的图片获取到Next.js网站？

问题根源与修复步骤 #

• 核心错误：Image组件属性用错
  你写的source={{ uri:url }}是React Native的Image写法，Next.js的Image组件需要用src属性，直接传入URL即可，不需要包裹uri对象。

• 遗漏Image组件导入
  代码里使用了<Image>但没有从next/image导入，导致组件无法被正确识别。

• 初始空状态处理
  url初始值为undefined，直接渲染会触发属性缺失错误，需要添加加载状态或条件渲染。

• 异步代码优化
  你的异步函数同时混用了await和.then()，统一用await能让代码更简洁易读。

• 添加错误捕获
  获取Firebase下载链接可能失败，捕获异常能避免页面崩溃并排查问题。

修改后的完整代码 #

import { useState, useEffect } from "react";
import { firebaseConfig } from "@/firebase/firebase";
import { initializeApp } from "@/firebase/firebase";
import { getStorage, ref, getDownloadURL } from "firebase/storage";
import Image from "next/image"; // 导入Next.js官方Image组件
import styles from "../../styles/collections.module.css";

initializeApp(firebaseConfig);

export default function Test() {
    const [url, setUrl] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchImageUrl = async () => {
            try {
                const storage = getStorage();
                const reference = ref(storage, 'collections/amsterdam/bedroom/image10.avif');
                const downloadUrl = await getDownloadURL(reference);
                setUrl(downloadUrl);
            } catch (err) {
                setError(err.message);
                console.error("获取图片URL失败：", err);
            } finally {
                setLoading(false);
            }
        };

        fetchImageUrl();
    }, []);

    if (loading) return <div className={styles.test_container}>加载中...</div>;
    if (error) return <div className={styles.test_container}>加载失败：{error}</div>;

    return (
        <div className={styles.test}>
            <div className={styles.test_container}>
                <h1>从Firebase获取图片到Next.js项目</h1>
                {url && (
                    <Image
                        src={url} // 替换为Next.js要求的src属性
                        width={500}
                        height={500}
                        alt="阿姆斯特丹卧室图片" // 不要留空alt，提升可访问性
                    />
                )}
            </div>
        </div>
    );
}

额外注意事项 #

• 确保Firebase Storage的规则允许访问目标图片：如果是公开资源，规则需设置为允许读取；私有资源则需要配置用户认证。
• 若遇到跨域问题，需在next.config.js中添加Firebase Storage的域名：

  // next.config.js
  module.exports = {
    images: {
      domains: ['firebasestorage.googleapis.com'],
    },
  };
  

内容的提问来源于stack exchange，提问作者João Pedro