Firestore中如何调用由其他字段名拼接生成的字段？

在JavaScript中，要根据product.type动态获取对应的type+Url格式字段，不能用常规的点.访问语法，得用方括号[]属性访问器，这是处理动态属性名的标准方式。

直接在使用时动态获取 #

如果只是在渲染或使用时需要这个图片URL，直接通过以下方式调用：

// 假设product.type的值是"phone"，则会访问product.phoneUrl
const imageUrl = product[product.type + 'Url'];

结合你的React代码，比如要渲染图片可以这么写：

{product.type && product[product.type + 'Url'] && (
  <img 
    src={product[product.type + 'Url']} 
    alt={`${product.name} 图片`} 
  />
)}

提前处理到state中（更便捷） #

如果需要多次使用这个图片URL，可以在获取产品数据时，直接把动态字段的值提取出来存入state，后续直接调用即可：

const getProduct = async () => {
  const docSnap = await getDoc(docRef);
  if (docSnap.exists()) {
    const productData = docSnap.data();
    // 动态提取对应类型的图片URL，存入新字段，可添加默认值避免报错
    productData.dynamicImageUrl = productData[productData.type + 'Url'] || '/default-image.png';
    setProduct(productData);
  } else {
    console.log("no product!");
  }
};

之后就可以直接用product.dynamicImageUrl来访问图片地址，不用每次都拼接属性名。

注意事项 #

• 确保product.type的大小写和Firestore中对应的type+Url字段名完全一致（比如type是"Laptop"，字段就得是"LaptopUrl"，大小写不匹配会返回undefined）
• 必须在product数据加载完成后再访问，否则会因为初始空对象报错，可以通过product.type是否存在来判断加载状态

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