UICollectionView从Firebase加载图片偶现错误，求代码问题排查

看起来你遇到的是UICollectionView单元格复用结合异步图片下载导致的经典图片错乱/不显示问题，咱们一步步拆解你的代码问题：

核心问题点 #

1. 异步下载完成时单元格已被复用 #

当你发起Firebase存储的图片下载请求后，这个操作是异步的。如果用户快速滚动列表，当前单元格会被复用给其他indexPath的位置。当旧的下载任务完成时，它会把图片设置到已经被复用的单元格上，导致图片重复/显示错误。

2. downloadTask 未正确绑定到单元格 #

你的CollectionViewCell里定义了downloadTask属性，但在cellForItemAt中发起下载请求时，没有把任务赋值给cell.downloadTask。这就导致prepareForReuse里调用downloadTask.cancel()其实是无效的——因为这个属性根本没被赋值，取消的是一个空任务，旧的下载请求依然在后台运行。

3. 冗余代码与强制解包风险 #

• 你连续两次调用DispatchQueue.main.async，其实一次就足够，而且reloadInputViews()是给输入控件用的，UIImageView完全不需要这个方法，属于冗余代码。
• photoLive!的强制解包如果遇到nil值会直接崩溃，存在安全隐患。

4. prepareForReuse 的逻辑有遗漏 #

虽然你清空了imageViewUn.image，但因为downloadTask没正确绑定，旧的下载任务没被取消，还是会在完成时干扰新的单元格内容。

修正后的代码示例 #

第一步：修复 CollectionViewCell 的 prepareForReuse 和任务绑定 #

class CollectionViewCell: UICollectionViewCell { 
    @IBOutlet weak var imageViewUn: UIImageView! 
    var downloadTask: StorageDownloadTask? // 改为可选类型，避免空值问题

    public override func prepareForReuse() { 
        super.prepareForReuse() 
        // 清空图片
        imageViewUn.image = nil 
        // 取消当前正在执行的下载任务（如果有的话）
        downloadTask?.cancel() 
        // 重置任务引用
        downloadTask = nil 
    } 
}

第二步：修复 cellForItemAt 方法 #

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { 
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell 

    // 先处理photoLive为nil的情况，避免崩溃
    guard let photoLive = liveRecent[indexPath.row].photoURL else {
        cell.imageViewUn.image = nil // 可以替换为你的占位图
        return cell
    }

    // 绑定下载任务到单元格
    cell.downloadTask = storageRef.reference(forURL: photoLive).getData(maxSize: 1 * 1024 * 1024) { [weak cell] (imgData, error) in 
        // 使用weak cell避免循环引用，同时判断单元格是否还可用
        guard let strongCell = cell else { return }
        
        if let error = error { 
            // 建议改用UIAlertController，UIAlertView已被废弃
            let alert = UIAlertController(title: "Error", message: error.localizedDescription, preferredStyle: .alert)
            alert.addAction(UIAlertAction(title: "OK", style: .default))
            self.present(alert, animated: true)
        } else if let data = imgData { 
            // 确保在主线程更新UI
            DispatchQueue.main.async {
                strongCell.imageViewUn.image = UIImage(data: data)
            }
        } 
    } 

    return cell 
}

额外优化建议 #

• 添加占位图：在请求开始时给imageViewUn设置一张占位图，提升用户体验。
• 使用图片缓存：考虑集成FirebaseUI的FirebaseStorageUI库，它自带图片缓存和复用管理，能更优雅地处理这种场景，避免手动管理下载任务的麻烦。
• 避免强制解包：尽可能用guard let或if let处理可选值，减少崩溃风险。

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