如何在react-admin中编辑Firebase Storage图片URL并正常显示

方案1：自定义字段组件（最便捷，无需修改全局数据逻辑） #

直接封装专门处理Firebase gs路径的图片字段，替换原生ImageField即可：

import { useField, useRecordContext } from 'react-admin';
import { getStorage, ref, getDownloadURL } from "firebase/storage";
import { useState, useEffect } from 'react';

const FirebaseImageField = ({ source, ...rest }) => {
  const { field } = useField(source);
  const [imageUrl, setImageUrl] = useState('');
  const record = useRecordContext();

  useEffect(() => {
    if (!field.value || !field.value.startsWith('gs://')) {
      setImageUrl(field.value || '');
      return;
    }
    const storage = getStorage();
    const storageRef = ref(storage, field.value);
    getDownloadURL(storageRef)
      .then(url => setImageUrl(url))
      .catch(err => console.error('获取图片地址失败', err));
  }, [field.value, record]);

  if (!imageUrl) return null;
  return <img src={imageUrl} {...rest} alt="" />
};

使用方式和原生Field完全一致：

// 在List、Show、Edit组件内直接调用
<FirebaseImageField source="你的存储路径字段名" label="图片" width="100px" />

方案2：全局DataProvider包装（适合大量字段需要转换的场景） #

如果全站多处需要处理gs路径转换，可以直接包装react-admin-firebase生成的DataProvider，在数据返回前统一完成转换：

import { FirebaseDataProvider } from 'react-admin-firebase';
import { getStorage, ref, getDownloadURL } from "firebase/storage";

// 替换为你自己的firebase配置
const firebaseConfig = {};
const originalDataProvider = FirebaseDataProvider(firebaseConfig, {});

// 递归转换所有gs路径的工具函数
const convertGsUrls = async (record) => {
  const converted = {...record};
  const storage = getStorage();
  for (const key in converted) {
    const value = converted[key];
    if (typeof value === 'string' && value.startsWith('gs://')) {
      try {
        converted[key] = await getDownloadURL(ref(storage, value));
      } catch (e) {
        console.error(`转换路径${value}失败`, e);
      }
    }
    // 处理嵌套对象
    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
      converted[key] = await convertGsUrls(value);
    }
    // 处理数组
    if (Array.isArray(value)) {
      converted[key] = await Promise.all(value.map(item => 
        typeof item === 'object' && item !== null ? convertGsUrls(item) : item
      ));
    }
  }
  return converted;
}

// 包装后的DataProvider直接传给Admin组件即可
export const dataProvider = {
  ...originalDataProvider,
  getList: async (resource, params) => {
    const result = await originalDataProvider.getList(resource, params);
    const convertedData = await Promise.all(result.data.map(convertGsUrls));
    return {...result, data: convertedData};
  },
  getOne: async (resource, params) => {
    const result = await originalDataProvider.getOne(resource, params);
    const convertedData = await convertGsUrls(result.data);
    return {...result, data: convertedData};
  },
  getMany: async (resource, params) => {
    const result = await originalDataProvider.getMany(resource, params);
    const convertedData = await Promise.all(result.data.map(convertGsUrls));
    return {...result, data: convertedData};
  },
  // 其他需要转换的请求方法按照上面格式补充即可
};

配置完成后原生ImageField可以直接使用：

<ImageField source="你的存储路径字段名" label="图片" />

• useQuery调用getList返回空数组：getList要求必须传入完整参数，pagination（包含page、perPage）、sort（包含field、order）、filter三个参数缺一不可，不能传空载荷。正确调用示例：

const { data, loading } = useQuery({
  type: 'getList',
  resource: '你的资源名',
  payload: {
    pagination: { page: 1, perPage: 10 },
    sort: { field: 'id', order: 'ASC' },
    filter: {}
  }
});

• ImageField的source属性报错必须为字符串：source是指定从当前记录取值的字段路径，只能传字符串类型的字段名，不能直接传图片URL。如果要手动传URL，不需要填source，直接给ImageField传src属性即可。

内容的提问来源于stack exchange，提问作者crevulus