How to display referenced technology names in Sanity preview subtitle?

The issue is that when you're selecting from an array of references, you need to use special syntax to dereference them. Your current approach technologies: 'technologies.name' won't work because technologies is an array of references, not a single reference.

For arrays of references, you need to access individual items by index and dereference each one. Here's how to fix it:

preview: {
  select: {
    customerName: 'customer.name',
    customerImage: 'customer.image',
    tech0: 'technologies.0.name',  // First technology
    tech1: 'technologies.1.name',  // Second technology
    tech2: 'technologies.2.name'   // Third technology
  },
  prepare(selection) {
    const { customerName, customerImage, tech0, tech1, tech2 } = selection;
    
    // Filter out undefined values and join
    const technologies = [tech0, tech1, tech2].filter(Boolean);
    const subtitleTechnologies = technologies.join(', ');

    return {
      title: customerName,
      subtitle: subtitleTechnologies,
      media: customerImage
    };
  }
}

The key points:

1. Use numeric indices - Access array items using technologies.0.name, technologies.1.name, etc. to get the name field from each referenced technology document
2. Select multiple items - Since you can't directly map over arrays in the select object, you need to explicitly select each item you want (up to the limit you need)
3. Filter in prepare - Use .filter(Boolean) to remove any undefined values if there are fewer than 3 technologies

This approach is documented in the preview configuration documentation, where arrays are accessed using numeric indices like images.0.asset.

If you need to display more than a few technologies or a variable number, you might want to consider using a custom preview component instead, which gives you more flexibility for complex scenarios.